/* MyVoyageBoard split stylesheet: styles-ui-system.css
   Button hierarchy, card hierarchy, Edit Voyage and financial UI system
   Preserves original cascade order from styles.css. */

/* =========================================================
   PATCH: Documents upload + Alerts panel theme polish
   Ensures buttons and modal panels follow light/dark/site theme.
========================================================= */
.trip-planner .planner-section[data-private-docs] .planner-docs-upload .planner-doc-upload,
.trip-planner .planner-docs-upload .planner-doc-upload,
.trip-modal-body .planner-docs-upload .planner-doc-upload{
  background:linear-gradient(135deg, var(--accent, #22aeea), #0ea5e9) !important;
  color:#ffffff !important;
  border:1px solid rgba(14,165,233,.45) !important;
  box-shadow:0 10px 24px rgba(14,165,233,.24) !important;
  font-weight:850 !important;
  opacity:1 !important;
}
.trip-planner .planner-section[data-private-docs] .planner-docs-upload .planner-doc-upload:disabled,
.trip-planner .planner-docs-upload .planner-doc-upload:disabled,
.trip-modal-body .planner-docs-upload .planner-doc-upload:disabled{
  opacity:.65 !important;
  color:#ffffff !important;
}
body.light .trip-planner .planner-section[data-private-docs] .planner-docs-upload .planner-doc-upload,
body.light .trip-planner .planner-docs-upload .planner-doc-upload,
body.light .trip-modal-body .planner-docs-upload .planner-doc-upload{
  background:linear-gradient(135deg, var(--accent, #22aeea), #0284c7) !important;
  color:#ffffff !important;
  border-color:rgba(2,132,199,.38) !important;
}

.alerts-panel-overlay{
  background:rgba(2,6,23,.58) !important;
  backdrop-filter:blur(10px) saturate(130%) !important;
  -webkit-backdrop-filter:blur(10px) saturate(130%) !important;
}
.alerts-panel-modal{
  background:linear-gradient(180deg, rgba(15,23,42,.98), rgba(15,23,42,.94)) !important;
  color:var(--text,#e5e7eb) !important;
  border:1px solid rgba(56,189,248,.22) !important;
  box-shadow:0 26px 80px rgba(0,0,0,.52), 0 0 0 1px rgba(255,255,255,.04) inset !important;
}
.alerts-panel-header{
  background:linear-gradient(135deg, rgba(34,174,234,.16), rgba(124,58,237,.09), rgba(15,23,42,.92)) !important;
  border-bottom:1px solid rgba(56,189,248,.18) !important;
}
.alerts-panel-header h3{
  color:var(--text,#e5e7eb) !important;
}
.alerts-panel-close{
  background:rgba(15,23,42,.65) !important;
  color:var(--text,#e5e7eb) !important;
  border:1px solid rgba(148,163,184,.34) !important;
}
.alerts-group h4{
  color:var(--text,#e5e7eb) !important;
}
.alerts-group-item{
  background:rgba(15,23,42,.54) !important;
  border-color:rgba(56,189,248,.18) !important;
}
.alerts-group-item.planning{
  background:linear-gradient(135deg, rgba(251,191,36,.13), rgba(34,174,234,.05)) !important;
  border-color:rgba(251,191,36,.34) !important;
}
.alerts-quick-action{
  background:rgba(34,174,234,.10) !important;
  color:var(--text,#e5e7eb) !important;
  border-color:rgba(56,189,248,.28) !important;
}
body.light .alerts-panel-overlay{
  background:rgba(15,23,42,.48) !important;
}
body.light .alerts-panel-modal{
  background:linear-gradient(180deg, #ffffff, #f8fbff) !important;
  color:var(--text,#0f172a) !important;
  border:1px solid rgba(34,174,234,.24) !important;
  box-shadow:0 26px 70px rgba(15,23,42,.24), 0 0 0 1px rgba(255,255,255,.78) inset !important;
}
body.light .alerts-panel-header{
  background:linear-gradient(135deg, rgba(34,174,234,.14), rgba(124,58,237,.06), rgba(255,255,255,.96)) !important;
  border-bottom:1px solid rgba(34,174,234,.18) !important;
}
body.light .alerts-panel-close{
  background:#ffffff !important;
  color:var(--text,#0f172a) !important;
  border-color:rgba(56,189,248,.28) !important;
}
body.light .alerts-group h4,
body.light .alerts-panel-header h3{
  color:var(--text,#0f172a) !important;
}
body.light .alerts-group-item{
  background:rgba(255,255,255,.88) !important;
  border-color:rgba(34,174,234,.16) !important;
}
body.light .alerts-group-item.planning{
  background:linear-gradient(135deg, rgba(255,251,235,.92), rgba(240,249,255,.88)) !important;
  border-color:rgba(251,191,36,.34) !important;
}
body.light .alerts-quick-action{
  background:rgba(34,174,234,.08) !important;
  color:var(--text,#0f172a) !important;
  border-color:rgba(34,174,234,.24) !important;
}


/* Alerts: use MyVoyageBoard ocean theme instead of yellow planning color */
.alerts-count-badge,
.m-alert-count-badge{
  background: linear-gradient(135deg, var(--accent, #22aeea), #0ea5e9) !important;
  color: #fff !important;
}

.alerts-group-item.planning{
  background: rgba(56,189,248,.08) !important;
  border-color: rgba(56,189,248,.28) !important;
}

body.light .alerts-group-item.planning{
  background: rgba(14,165,233,.07) !important;
  border-color: rgba(14,165,233,.24) !important;
}

.alerts-group h4{
  color: var(--text, #e5e7eb) !important;
}

.alerts-group-item.planning .alerts-quick-action{
  background: rgba(56,189,248,.10) !important;
  border-color: rgba(56,189,248,.28) !important;
}

body.light .alerts-group-item.planning .alerts-quick-action{
  background: rgba(14,165,233,.08) !important;
  border-color: rgba(14,165,233,.22) !important;
}

/* =========================================================
   THEME CLEANUP PATCH — card spacing, calmer surfaces,
   and button/token standardization.
   Safe CSS-only layer: no markup or app logic changed.
========================================================= */
:root{
  /* Core semantic tokens */
  --surface: rgba(15,23,42,.92);
  --surface-soft: rgba(15,23,42,.72);
  --surface-muted: rgba(15,23,42,.58);
  --surface-raised: rgba(30,41,59,.82);
  --text: #e5e7eb;
  --muted: #9ca3af;
  --muted-2: #cbd5e1;
  --border: rgba(148,163,184,.24);
  --border-strong: rgba(148,163,184,.34);
  --accent: #38bdf8;
  --accent-strong: #0ea5e9;
  --accent-soft: rgba(56,189,248,.14);
  --accent-border: rgba(56,189,248,.34);
  --danger: #f87171;
  --danger-soft: rgba(248,113,113,.12);
  --success: #22c55e;
  --success-soft: rgba(34,197,94,.12);

  /* Shared sizing tokens */
  --radius-card: 18px;
  --radius-control: 999px;
  --padding-card: 14px;
  --padding-card-sm: 12px;
  --header-size: .92rem;
  --shadow-card: 0 8px 22px rgba(0,0,0,.22);
  --shadow-card-hover: 0 10px 26px rgba(0,0,0,.26);
  --shadow-important: 0 14px 32px rgba(2,132,199,.20);

  /* Legacy aliases now point at the calmer semantic system */
  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-shadow: var(--shadow-card);
  --kpi-bg: var(--surface-soft);
  --kpi-border: var(--border);
  --kpi-shadow: var(--shadow-card);
  --surface-border: var(--border-strong);
  --surface-border-2: var(--border);
  --row-bg: var(--surface-soft);
  --row-border: var(--border);
  --tt-line-soft: var(--border);
  --tt-card-shadow: var(--shadow-card);
}
body.light{
  --surface: rgba(255,255,255,.94);
  --surface-soft: rgba(255,255,255,.78);
  --surface-muted: rgba(248,250,252,.76);
  --surface-raised: rgba(255,255,255,.98);
  --text: #0f172a;
  --muted: #64748b;
  --muted-2: #475569;
  --border: rgba(148,163,184,.34);
  --border-strong: rgba(100,116,139,.42);
  --accent: #0284c7;
  --accent-strong: #0369a1;
  --accent-soft: rgba(14,165,233,.12);
  --accent-border: rgba(14,165,233,.30);
  --danger: #dc2626;
  --danger-soft: rgba(220,38,38,.09);
  --success: #16a34a;
  --success-soft: rgba(22,163,74,.10);
  --shadow-card: 0 8px 20px rgba(15,23,42,.08);
  --shadow-card-hover: 0 10px 24px rgba(15,23,42,.11);
  --shadow-important: 0 14px 30px rgba(2,132,199,.13);

  --card-bg: var(--surface);
  --card-border: var(--border);
  --card-shadow: var(--shadow-card);
  --kpi-bg: var(--surface-soft);
  --kpi-border: var(--border);
  --kpi-shadow: var(--shadow-card);
  --surface-border: var(--border-strong);
  --surface-border-2: var(--border);
  --row-bg: var(--surface-soft);
  --row-border: var(--border);
  --tt-line-soft: var(--border);
  --tt-card-shadow: var(--shadow-card);
}

/* Calm down secondary glow/gradient noise. Important cards still keep emphasis. */
.card,
.kpi,
.trip-row,
.planner-card,
.planner-item,
.agenda-day-card,
.check-card,
.check-item,
.alerts-card,
.alerts-group,
.alerts-group-item,
.command-center-panel,
.command-center-priority-row,
.command-center-port-intelligence,
.ports-stat,
.ports-leaderboard,
.ships-panel,
.port-stat-row,
.route-timeline-card,
.port-journal-card{
  background: var(--surface-soft) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: var(--shadow-card) !important;
  padding: var(--padding-card) !important;
}
body.light .card,
body.light .kpi,
body.light .trip-row,
body.light .planner-card,
body.light .planner-item,
body.light .agenda-day-card,
body.light .check-card,
body.light .check-item,
body.light .alerts-card,
body.light .alerts-group,
body.light .alerts-group-item,
body.light .command-center-panel,
body.light .command-center-priority-row,
body.light .command-center-port-intelligence,
body.light .ports-stat,
body.light .ports-leaderboard,
body.light .ships-panel,
body.light .port-stat-row,
body.light .route-timeline-card,
body.light .port-journal-card{
  background: var(--surface) !important;
}

/* Main/hero-level cards keep a little more presence. */
.command-center-card,
.command-center-priority-top,
.card.card-accent,
.kpi-card,
.trip-hero-card{
  border-color: var(--accent-border) !important;
  box-shadow: var(--shadow-important) !important;
}
.command-center-card,
.command-center-priority-top{
  background:
    radial-gradient(circle at top left, var(--accent-soft), transparent 42%),
    var(--surface) !important;
}

/* Standard card header rhythm. */
.card-header,
.trip-card-header,
.dashboard-overview-header,
.command-center-header,
.command-center-panel-head,
.planner-section-header,
.alerts-group-header,
.ports-section-header,
.ships-panel-header{
  min-height: 34px;
  margin-bottom: 10px !important;
  padding-bottom: 0 !important;
}
.card-header h2,
.card-header h3,
.trip-card-header h2,
.trip-card-header h3,
.command-center-title-wrap h2,
.command-center-panel h3,
.planner-section-title,
.alerts-group-title,
.ships-panel-title,
.ports-leaderboard-title,
.port-journal-title{
  color: var(--text) !important;
  font-size: var(--header-size) !important;
  line-height: 1.2 !important;
  font-weight: 850 !important;
}
.card-header small,
.card-subtitle,
.help-text,
.hint,
.kpi-sub,
.trip-meta,
.planner-item-notes,
.alerts-group-subtitle,
.command-center-empty{
  color: var(--muted) !important;
}

/* Three clear button styles:
   .btn = Secondary by default
   .btn-primary = Primary
   .btn-quiet = Quiet, available for low-priority actions
*/
.btn,
.btn-secondary,
a.btn-secondary,
button.btn-secondary{
  min-height: 34px;
  padding: 7px 12px;
  border-radius: var(--radius-control) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--surface-raised) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-weight: 750;
}
.btn-primary,
a.btn-primary,
button.btn-primary{
  border-color: transparent !important;
  background: var(--accent-strong) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(14,165,233,.24) !important;
}
.btn-quiet,
a.btn-quiet,
button.btn-quiet,
.icon-btn,
.desktop-more-btn,
.desktop-user-btn{
  border-color: transparent !important;
  background: transparent !important;
  color: var(--muted-2) !important;
  box-shadow: none !important;
}
.btn-danger,
a.btn-danger,
button.btn-danger{
  border-color: rgba(248,113,113,.36) !important;
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  box-shadow: none !important;
}
.btn:hover,
.btn-secondary:hover,
.icon-btn:hover,
.desktop-more-btn:hover,
.desktop-user-btn:hover{
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
  color: var(--text) !important;
  filter: none !important;
}
.btn-primary:hover{
  background: var(--accent) !important;
  color: #fff !important;
}
.btn-danger:hover{
  background: var(--danger-soft) !important;
  border-color: rgba(248,113,113,.52) !important;
}

/* Reduce decorative bars so secondary cards step back. */
.kpi::before,
.ports-stat::before,
.card.card-accent::before{
  opacity: .55;
}
.command-center-card::before{
  opacity: .82;
}

@media (max-width:720px){
  :root{
    --radius-card: 16px;
    --padding-card: 12px;
    --header-size: .9rem;
  }
  .btn,
  .btn-secondary,
  .btn-primary,
  .btn-quiet{
    min-height: 38px;
    padding: 8px 12px;
  }
}
/* === MyVoyageBoard targeted visual-noise + 3-button cleanup patch ===
   Goal: keep Hero, Current Status, and Important Alerts prominent while
   making secondary cards quieter and normalizing actions into:
   Primary / Secondary / Quiet. CSS-only; no app logic changes.
*/
:root{
  --btn-radius: 999px;
  --btn-pad-y: 7px;
  --btn-pad-x: 12px;
  --btn-min-h: 34px;
  --quiet-card-shadow: 0 6px 16px rgba(0,0,0,.16);
  --quiet-card-shadow-light: 0 6px 16px rgba(15,23,42,.055);
  --secondary-card-opacity: .96;
  --empty-bg: rgba(148,163,184,.06);
  --empty-border: rgba(148,163,184,.22);
}
body.light{
  --quiet-card-shadow: var(--quiet-card-shadow-light);
  --empty-bg: rgba(15,23,42,.035);
  --empty-border: rgba(100,116,139,.20);
}

/* 1) Reduce visual noise on secondary cards, stats, panels, and empty states. */
.kpi,
.kpi-card,
.ports-stat,
.ports-stat-kpi,
.ships-panel-kpi,
.stat-card,
.payment-card,
.payment-row,
.planner-card,
.planner-item,
.agenda-day-card,
.check-card,
.check-item,
.alerts-group,
.alerts-group-item,
.route-timeline-card,
.port-journal-card,
.ports-leaderboard,
.ships-panel,
.port-stat-row,
.command-center-priority-row,
.command-center-port-intelligence{
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
  box-shadow: var(--quiet-card-shadow) !important;
  opacity: var(--secondary-card-opacity);
}

/* Remove strong accent strips/glow from secondary cards. */
.kpi::before,
.kpi-card::before,
.ports-stat::before,
.ports-stat-kpi::before,
.ships-panel-kpi::before,
.planner-card::before,
.check-card::before,
.route-timeline-card::before,
.port-journal-card::before{
  opacity: .28 !important;
  filter: none !important;
}

/* Stats should read cleanly, not compete with the main status/hero cards. */
.kpi-value,
.ports-stat-kpi-value,
.ships-panel-kpi-value,
.stat-value{
  text-shadow: none !important;
}
.kpi:hover,
.kpi-card:hover,
.ports-stat-kpi:hover,
.ships-panel-kpi:hover,
.planner-card:hover,
.check-card:hover{
  transform: none !important;
  box-shadow: var(--shadow-card-hover) !important;
}

/* Keep the important areas more visually dominant. */
.hero-card,
.trip-hero,
.trip-card-hero,
.command-center-card,
.command-center-status,
.command-center-live,
.command-center-alert,
.command-center-important,
.alerts-card.alerts-critical,
.alerts-card.important,
.smart-alert-card.important{
  background: var(--card-bg) !important;
  border-color: var(--border-strong) !important;
  box-shadow: var(--shadow-important) !important;
  opacity: 1 !important;
}
.command-center-card::before,
.hero-card::before,
.trip-hero::before,
.trip-card-hero::before{
  opacity: .78 !important;
}

/* Empty states become quieter helper panels. */
.empty,
.today-empty,
.timeline-empty,
.payment-empty,
.port-journal-empty,
.ships-panel-empty,
.command-center-empty,
.trip-planner .planner-docs-empty,
.alerts-empty,
.no-results,
.blank-state,
.empty-state{
  color: var(--muted) !important;
  background: var(--empty-bg) !important;
  border: 1px dashed var(--empty-border) !important;
  border-radius: var(--radius-card) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* 2) Standardize buttons into three styles. */
.btn,
.btn-secondary,
button.btn,
a.btn,
.empty-link,
.route-pill-btn,
.status-toolbar-btn,
.ports-filter-btn,
.port-trip-map-btn,
.port-trip-memory-btn,
.inline-memory-btn,
.trip-template-copy-btn,
.trip-template-refresh-library-btn,
.trip-template-import-btn,
.trip-starter-unlock-btn,
.mvb-ports-call-btn,
.share-ports-call-btn,
.trip-planner-deck-btn,
.exc-memory-btn,
.port-call-action-btn,
.bug-success-button,
.command-center-pay-btn,
.mvb-ship-info-btn{
  min-height: var(--btn-min-h) !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  border-radius: var(--btn-radius) !important;
  border: 1px solid var(--border-strong) !important;
  background: var(--surface-raised) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  font-weight: 750 !important;
  text-decoration: none !important;
  text-shadow: none !important;
  filter: none !important;
}

/* Primary: Save, Add Voyage, Sign In, send/confirm/create actions. */
.btn-primary,
a.btn-primary,
button.btn-primary,
#login-save,
#add-trip,
#save-trip,
#save-account,
#send-pre-voyage-planner,
.packing-add-btn,
.trip-template-create-protected-btn{
  border-color: transparent !important;
  background: var(--accent-strong) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(14,165,233,.22) !important;
}

/* Quiet: Cancel, More, Hide, icon-only, low-priority utility actions. */
.btn-quiet,
a.btn-quiet,
button.btn-quiet,
.icon-btn,
.desktop-more-btn,
.desktop-user-btn,
.dashboard-hide-card-btn,
.dashboard-restore-card-btn,
.port-call-move-btn,
.port-favorite-btn,
.packing-print-btn,
.trip-meta-help-btn,
.trip-template-remove-protected-btn,
.trip-starter-delete-btn,
button[aria-label*="Cancel"],
button[aria-label*="More"],
button[aria-label*="Hide"]{
  border-color: transparent !important;
  background: transparent !important;
  color: var(--muted-2) !important;
  box-shadow: none !important;
}

/* Danger stays separate for destructive actions, but visually calmer than before. */
.btn-danger,
a.btn-danger,
button.btn-danger,
.trip-starter-delete-btn{
  border-color: rgba(248,113,113,.34) !important;
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  box-shadow: none !important;
}

.btn:hover,
.btn-secondary:hover,
a.btn:hover,
button.btn:hover,
.empty-link:hover,
.route-pill-btn:hover,
.status-toolbar-btn:hover,
.ports-filter-btn:hover,
.port-trip-map-btn:hover,
.port-trip-memory-btn:hover,
.inline-memory-btn:hover,
.mvb-ship-info-btn:hover{
  background: var(--accent-soft) !important;
  border-color: var(--accent-border) !important;
  color: var(--text) !important;
  filter: none !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover,
#login-save:hover,
#add-trip:hover,
#save-trip:hover,
#save-account:hover,
.packing-add-btn:hover{
  background: var(--accent) !important;
  color: #fff !important;
}
.btn-quiet:hover,
.icon-btn:hover,
.desktop-more-btn:hover,
.desktop-user-btn:hover,
.dashboard-hide-card-btn:hover,
.dashboard-restore-card-btn:hover,
.port-call-move-btn:hover,
.port-favorite-btn:hover,
.packing-print-btn:hover,
.trip-meta-help-btn:hover{
  background: var(--accent-soft) !important;
  border-color: transparent !important;
  color: var(--text) !important;
}
.btn-danger:hover,
.trip-starter-delete-btn:hover{
  background: var(--danger-soft) !important;
  border-color: rgba(248,113,113,.50) !important;
  color: var(--danger) !important;
}

/* Size helpers keep the same visual language. */
.btn-small,
.btn-sm,
.btn.btn-small,
button.btn-small,
a.btn-small{
  min-height: 30px !important;
  padding: 5px 10px !important;
  font-size: .78rem !important;
}
.tab-btn{
  box-shadow: none !important;
  text-shadow: none !important;
}

@media (max-width:720px){
  :root{
    --btn-min-h: 38px;
    --btn-pad-y: 8px;
    --btn-pad-x: 12px;
  }
}


/* ==========================================================
   MVB cleanup pass v3: quieter secondary UI + clear buttons
   Goal: hero/current-status/alerts stand out; supporting cards recede.
   ========================================================== */
:root{
  --mvb-shadow-quiet: 0 6px 16px rgba(15,23,42,.055);
  --mvb-shadow-feature: 0 16px 38px rgba(14,165,233,.15);
  --mvb-border-quiet: rgba(148,163,184,.22);
  --mvb-border-feature: rgba(14,165,233,.32);
}
body:not(.light){
  --mvb-shadow-quiet: 0 8px 20px rgba(0,0,0,.16);
  --mvb-shadow-feature: 0 18px 42px rgba(34,174,234,.16);
  --mvb-border-quiet: rgba(148,163,184,.16);
  --mvb-border-feature: rgba(34,174,234,.34);
}

/* Dashboard: supporting KPI cards step back. */
#view-dashboard .compact-dashboard-kpis .kpi,
#view-dashboard .kpi-grid .kpi,
#view-dashboard .dashboard-kpi-grid .kpi{
  border-color: var(--mvb-border-quiet) !important;
  box-shadow: var(--mvb-shadow-quiet) !important;
  background: var(--surface-raised, var(--surface)) !important;
  opacity: .94;
}
#view-dashboard .compact-dashboard-kpis .kpi::before,
#view-dashboard .kpi-grid .kpi::before,
#view-dashboard .dashboard-kpi-grid .kpi::before{
  opacity: .48 !important;
}

/* Keep the main / meaningful dashboard cards a little more present. */
#view-dashboard .compact-dashboard-kpis .kpi:nth-child(1),
#view-dashboard .compact-dashboard-kpis .kpi:nth-child(9),
#view-dashboard .compact-dashboard-kpis .kpi:nth-child(10),
#view-dashboard .kpi-grid .kpi:nth-child(1),
#view-dashboard .kpi-grid .kpi:nth-child(9),
#view-dashboard .kpi-grid .kpi:nth-child(10),
#view-dashboard .dashboard-kpi-grid .kpi:nth-child(1),
#view-dashboard .dashboard-kpi-grid .kpi:nth-child(9),
#view-dashboard .dashboard-kpi-grid .kpi:nth-child(10){
  opacity: 1;
  border-color: var(--mvb-border-feature) !important;
  box-shadow: var(--mvb-shadow-feature) !important;
}
#view-dashboard .compact-dashboard-kpis .kpi:nth-child(1)::before,
#view-dashboard .compact-dashboard-kpis .kpi:nth-child(9)::before,
#view-dashboard .compact-dashboard-kpis .kpi:nth-child(10)::before,
#view-dashboard .kpi-grid .kpi:nth-child(1)::before,
#view-dashboard .kpi-grid .kpi:nth-child(9)::before,
#view-dashboard .kpi-grid .kpi:nth-child(10)::before,
#view-dashboard .dashboard-kpi-grid .kpi:nth-child(1)::before,
#view-dashboard .dashboard-kpi-grid .kpi:nth-child(9)::before,
#view-dashboard .dashboard-kpi-grid .kpi:nth-child(10)::before{
  opacity: .78 !important;
}

/* Secondary panels and empty states should not glow like hero cards. */
.card:not(.hero-card):not(.command-center-status-card):not(.command-center-alert),
.planner-card,
.planner-item,
.check-card,
.check-item,
.ports-stat,
.ports-leaderboard,
.ships-panel,
.route-timeline-card,
.port-journal-card,
.alerts-group-item{
  box-shadow: var(--mvb-shadow-quiet) !important;
}
.empty-state,
.empty-card,
.command-center-empty,
.planner-empty,
.alerts-empty,
.check-empty{
  background: var(--surface-raised, var(--surface)) !important;
  border: 1px dashed var(--mvb-border-quiet) !important;
  box-shadow: none !important;
  color: var(--muted) !important;
}

/* Important cards keep the premium lift. */
.command-center-status-card,
.command-center-priority-top,
.command-center-alert,
.alert-card.important,
.alerts-card.important,
.hero-card,
.mvb-voyage-countdown-panel{
  border-color: var(--mvb-border-feature) !important;
  box-shadow: var(--mvb-shadow-feature) !important;
}
.mvb-voyage-countdown-panel{
  background: linear-gradient(135deg, rgba(239,249,255,.98), rgba(255,255,255,.92)) !important;
}
body:not(.light) .mvb-voyage-countdown-panel{
  background: linear-gradient(135deg, rgba(8,24,44,.96), rgba(12,45,75,.90)) !important;
}

/* Button system: three clear styles.
   Primary = Save/Add/Sign In/Edit. Secondary = Share/View/Open/Add to Calendar.
   Quiet = Cancel/More/Hide/low priority/destructive secondary. */
.btn,
button.btn,
a.btn,
.mvb-action-secondary{
  background: var(--surface-raised, var(--surface)) !important;
  border: 1px solid var(--border-strong, var(--border)) !important;
  color: var(--text) !important;
  box-shadow: none !important;
}
.btn-primary,
.mvb-action-primary,
#login-save,
#add-trip,
#save-trip,
#save-account,
.packing-add-btn{
  background: var(--accent-strong, var(--accent)) !important;
  border-color: transparent !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(14,165,233,.22) !important;
}
.btn-quiet,
.mvb-action-quiet,
.icon-btn,
.desktop-more-btn,
.desktop-user-btn,
.dashboard-hide-card-btn,
.dashboard-restore-card-btn,
.mvb-ship-info-btn{
  background: transparent !important;
  border-color: var(--mvb-border-quiet) !important;
  color: var(--muted-2, var(--muted)) !important;
  box-shadow: none !important;
}
.btn-danger,
.mvb-action-danger{
  background: transparent !important;
  border-color: rgba(248,113,113,.28) !important;
  color: var(--danger) !important;
  box-shadow: none !important;
}

/* Voyage-card action hierarchy. */
.trip-actions .btn,
.trip-actions button,
.trip-row.mvb-renderer-trip-row > .trip-actions .btn,
.trip-row.mvb-renderer-trip-row > .trip-actions button{
  min-height: 36px !important;
  padding: 8px 14px !important;
  font-weight: 800 !important;
}
.trip-actions .mvb-action-primary,
.trip-row.mvb-renderer-trip-row > .trip-actions .mvb-action-primary{
  background: var(--accent-strong, var(--accent)) !important;
  border-color: transparent !important;
  color: #fff !important;
}
.trip-actions .mvb-action-quiet,
.trip-row.mvb-renderer-trip-row > .trip-actions .mvb-action-quiet{
  background: transparent !important;
  border-color: var(--mvb-border-quiet) !important;
  color: var(--muted-2, var(--muted)) !important;
}
.trip-actions .mvb-action-danger,
.trip-row.mvb-renderer-trip-row > .trip-actions .mvb-action-danger{
  background: transparent !important;
  border-color: rgba(248,113,113,.25) !important;
  color: var(--danger) !important;
}

/* Ship Info should read as quiet utility, not a primary CTA. */
.mvb-ship-info-btn{
  min-height: 32px !important;
  padding: 6px 11px !important;
  font-size: .80rem !important;
  font-weight: 850 !important;
  background: rgba(255,255,255,.74) !important;
  color: var(--text) !important;
  border: 1px solid var(--mvb-border-quiet) !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.10) !important;
}
body:not(.light) .mvb-ship-info-btn{
  background: rgba(8,24,44,.56) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* Hover states stay subtle, except true primary buttons. */
.btn:hover,
button.btn:hover,
a.btn:hover,
.mvb-action-secondary:hover,
.mvb-action-quiet:hover,
.mvb-ship-info-btn:hover{
  transform: translateY(-1px);
  background: var(--accent-soft) !important;
  border-color: var(--accent-border, var(--accent)) !important;
  color: var(--text) !important;
  filter: none !important;
}
.btn-primary:hover,
.mvb-action-primary:hover,
#login-save:hover,
#add-trip:hover,
#save-trip:hover,
#save-account:hover{
  background: var(--accent, var(--accent-strong)) !important;
  color: #fff !important;
}
.btn-danger:hover,
.mvb-action-danger:hover{
  background: var(--danger-soft) !important;
  border-color: rgba(248,113,113,.45) !important;
  color: var(--danger) !important;
}

/* ==========================================================
   MVB final polish pass: quieter Ship Info, stronger hero,
   and one shared chip language across voyage/meta areas.
   ========================================================== */
:root{
  --mvb-chip-bg: rgba(255,255,255,.86);
  --mvb-chip-border: rgba(148,163,184,.30);
  --mvb-chip-shadow: 0 5px 14px rgba(15,23,42,.045);
  --mvb-hero-countdown-bg: linear-gradient(135deg,
    rgba(224,247,255,.98) 0%,
    rgba(240,249,255,.96) 48%,
    rgba(255,255,255,.92) 100%);
  --mvb-hero-countdown-shadow: 0 18px 44px rgba(14,165,233,.18);
}
body:not(.light){
  --mvb-chip-bg: rgba(15,23,42,.72);
  --mvb-chip-border: rgba(255,255,255,.16);
  --mvb-chip-shadow: 0 6px 18px rgba(0,0,0,.18);
  --mvb-hero-countdown-bg: linear-gradient(135deg,
    rgba(8,24,44,.98) 0%,
    rgba(12,45,75,.94) 54%,
    rgba(10,27,48,.90) 100%);
  --mvb-hero-countdown-shadow: 0 20px 48px rgba(34,174,234,.17);
}

/* Ship Info: match the quiet utility / More-button language. */
.mvb-ship-info-btn,
button.mvb-ship-info-btn,
.mvb-ship-info-btn--direct{
  min-height:30px !important;
  padding:5px 10px !important;
  border-radius:999px !important;
  background:var(--surface-raised, rgba(255,255,255,.78)) !important;
  border:1px solid var(--mvb-border-quiet, rgba(148,163,184,.22)) !important;
  color:var(--muted-2, var(--muted)) !important;
  box-shadow:none !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  letter-spacing:0 !important;
  text-shadow:none !important;
}
body:not(.light) .mvb-ship-info-btn,
body:not(.light) button.mvb-ship-info-btn,
body:not(.light) .mvb-ship-info-btn--direct{
  background:rgba(15,23,42,.48) !important;
  border-color:rgba(255,255,255,.14) !important;
  color:rgba(226,232,240,.86) !important;
}
.mvb-ship-info-btn:hover,
button.mvb-ship-info-btn:hover,
.mvb-ship-info-btn--direct:hover{
  background:var(--accent-soft) !important;
  border-color:var(--accent-border, rgba(14,165,233,.30)) !important;
  color:var(--text) !important;
  box-shadow:none !important;
}

/* Hero countdown is the star of the voyage card, so give it a little more lift. */
.mvb-voyage-hero-wrap,
.trip-row.mvb-renderer-trip-row{
  border-radius:24px !important;
}
.mvb-voyage-countdown-panel,
.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero .mvb-renderer-hero-copy{
  background:var(--mvb-hero-countdown-bg) !important;
  box-shadow:var(--mvb-hero-countdown-shadow) !important;
}
.mvb-voyage-countdown-panel{
  border-radius:23px 0 0 23px !important;
}
.trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
  border-radius:24px 24px 0 0 !important;
  background:linear-gradient(135deg, rgba(240,249,255,.99), rgba(255,255,255,.94)) !important;
}
body:not(.light) .trip-row.mvb-renderer-trip-row > .mvb-renderer-hero{
  background:linear-gradient(135deg, rgba(8,24,44,.98), rgba(12,45,75,.90)) !important;
}
@media(max-width:760px){
  .mvb-voyage-countdown-panel{
    border-radius:23px 23px 0 0 !important;
  }
}

/* One chip style: voyage meta, planner/docs, alerts, ports and small status pills. */
.trip-meta > span,
.trip-meta > button,
.trip-meta > .badge,
.trip-meta > .trip-meta-help-btn,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > span,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > button,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .trip-meta-help-btn,
.chip,
.badge,
.status-pill,
.lat-badge,
.doc-badge,
.exc-smart-badge,
.command-center-chip,
.command-center-badge,
.alerts-count-badge,
.port-detail-ship-chip,
.port-map-popup .pmp-ship-chip,
.timeline-trip-stats span,
.timeline-trip-newports{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  min-height:30px !important;
  padding:6px 10px !important;
  border-radius:999px !important;
  background:var(--mvb-chip-bg) !important;
  border:1px solid var(--mvb-chip-border) !important;
  box-shadow:var(--mvb-chip-shadow) !important;
  color:var(--muted-2, var(--muted)) !important;
  font-size:.88rem !important;
  font-weight:750 !important;
  line-height:1.15 !important;
  letter-spacing:0 !important;
  white-space:nowrap !important;
  text-shadow:none !important;
}
.trip-meta > .badge.good,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge.good,
.badge.good,
.status-pill.good{
  background:rgba(34,197,94,.13) !important;
  border-color:rgba(34,197,94,.30) !important;
  color:var(--success, #16a34a) !important;
}
.trip-meta > .badge.warn,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .badge.warn,
.badge.warn,
.status-pill.warn{
  background:rgba(245,158,11,.14) !important;
  border-color:rgba(245,158,11,.32) !important;
  color:var(--warning, #b45309) !important;
}
.trip-meta > .mvb-ports-call-btn,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .mvb-ports-call-btn{
  color:var(--text) !important;
  font-weight:850 !important;
}
.trip-meta > .trip-meta-help-btn,
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .trip-meta-help-btn{
  width:30px !important;
  min-width:30px !important;
  padding:0 !important;
}
body:not(.light) .trip-meta > span,
body:not(.light) .trip-meta > button,
body:not(.light) .trip-meta > .badge,
body:not(.light) .trip-meta > .trip-meta-help-btn,
body:not(.light) .chip,
body:not(.light) .badge,
body:not(.light) .status-pill,
body:not(.light) .lat-badge,
body:not(.light) .doc-badge,
body:not(.light) .exc-smart-badge,
body:not(.light) .command-center-chip,
body:not(.light) .command-center-badge,
body:not(.light) .alerts-count-badge{
  color:rgba(226,232,240,.88) !important;
}

@media(max-width:760px){
  .trip-meta > span,
  .trip-meta > button,
  .trip-meta > .badge,
  .chip,
  .badge,
  .status-pill,
  .lat-badge,
  .doc-badge,
  .exc-smart-badge{
    min-height:30px !important;
    padding:6px 9px !important;
    font-size:.84rem !important;
  }
}


/* ==========================================================
   MVB feature chip + flight action cleanup
   - Voyage Planner / Packing / Deck Plan / Ship Guide act like large feature chips
   - Flight Track = secondary, Edit = quiet
   - Trip meta help changes from ? to Tips chip
   ========================================================== */
.trip-row.mvb-renderer-trip-row .trip-planner-buttons{
  gap: 8px !important;
  margin-top: 8px !important;
}
.trip-row.mvb-renderer-trip-row .trip-planner-primary,
.trip-row.mvb-renderer-trip-row .trip-planner-secondary{
  gap: 8px !important;
}
.trip-row.mvb-renderer-trip-row .trip-planner-details > summary,
.trip-row.mvb-renderer-trip-row .trip-packing-details > summary,
.trip-row.mvb-renderer-trip-row .trip-planner-deck-btn{
  min-height: 38px !important;
  padding: 7px 14px !important;
  border-radius: 18px !important;
  border: 1px solid var(--border, rgba(148,163,184,.24)) !important;
  background: color-mix(in srgb, var(--surface-raised, var(--surface)) 94%, var(--accent) 6%) !important;
  color: var(--text) !important;
  box-shadow: 0 5px 12px rgba(15,23,42,.055) !important;
  font-size: .96rem !important;
  font-weight: 800 !important;
  letter-spacing: -.01em !important;
  justify-content: center !important;
  text-align: center !important;
}
.trip-row.mvb-renderer-trip-row .trip-planner-details > summary:hover,
.trip-row.mvb-renderer-trip-row .trip-packing-details > summary:hover,
.trip-row.mvb-renderer-trip-row .trip-planner-deck-btn:hover{
  transform: translateY(-1px);
  border-color: var(--accent-border, rgba(14,165,233,.32)) !important;
  background: var(--accent-soft, color-mix(in srgb, var(--accent) 12%, var(--surface))) !important;
  box-shadow: 0 8px 16px rgba(15,23,42,.075) !important;
}
body:not(.light) .trip-row.mvb-renderer-trip-row .trip-planner-details > summary,
body:not(.light) .trip-row.mvb-renderer-trip-row .trip-packing-details > summary,
body:not(.light) .trip-row.mvb-renderer-trip-row .trip-planner-deck-btn{
  background: color-mix(in srgb, var(--surface-raised, var(--surface)) 90%, var(--accent) 10%) !important;
  border-color: rgba(148,163,184,.20) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.18) !important;
}

.trip-row.mvb-renderer-trip-row .trip-flight-actions .trip-flight-track-btn{
  border-color: var(--border-strong, rgba(148,163,184,.36)) !important;
  background: var(--surface-raised, var(--surface)) !important;
  color: var(--text) !important;
}
.trip-row.mvb-renderer-trip-row .trip-flight-actions .trip-flight-edit-btn{
  border-color: transparent !important;
  background: transparent !important;
  color: var(--muted-2, var(--muted)) !important;
  box-shadow: none !important;
}
.trip-row.mvb-renderer-trip-row .trip-flight-actions .trip-flight-edit-btn:hover{
  background: var(--accent-soft) !important;
  color: var(--text) !important;
}

.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .trip-meta-help-btn,
.trip-meta > .trip-meta-help-btn{
  width: auto !important;
  height: 28px !important;
  min-height: 28px !important;
  padding: 0 11px !important;
  border-radius: 999px !important;
  font-size: .72rem !important;
  font-weight: 850 !important;
  letter-spacing: .01em !important;
  border: 1px solid var(--border, rgba(148,163,184,.28)) !important;
  background: var(--surface-raised, var(--surface)) !important;
  color: var(--muted-2, var(--muted)) !important;
  box-shadow: none !important;
}
.trip-row.mvb-renderer-trip-row > .trip-main .trip-meta > .trip-meta-help-btn:hover,
.trip-meta > .trip-meta-help-btn:hover{
  background: var(--accent-soft) !important;
  color: var(--text) !important;
  border-color: var(--accent-border, rgba(14,165,233,.28)) !important;
}
@media (max-width: 640px){
  .trip-row.mvb-renderer-trip-row .trip-planner-details > summary,
  .trip-row.mvb-renderer-trip-row .trip-packing-details > summary,
  .trip-row.mvb-renderer-trip-row .trip-planner-deck-btn{
    min-height: 40px !important;
    font-size: .92rem !important;
  }
}


/* Stateroom type link in voyage hero */
.mvb-stateroom-link{
  appearance:none;
  border:0;
  background:transparent;
  color:inherit;
  font:inherit;
  font-weight:800;
  padding:0;
  margin:0;
  cursor:pointer;
  text-align:left;
}
.mvb-stateroom-link:hover{
  text-decoration:underline;
}
#trip-stateroom-type{
  width:100%;
}


/* =========================================================
   APPROVED PORTS OF CALL CARD DESIGN
   Full-width destination cards with dedicated Arrival,
   All Aboard, and Departure schedule tiles.
   ========================================================= */
#ports-list.ports-list{
  gap:14px !important;
  margin-top:12px !important;
}

#ports-list .port-call-row{
  position:relative;
  grid-template-columns:30px minmax(0,1fr) auto;
  align-items:start;
  gap:12px;
  padding:15px 16px;
  border-radius:20px;
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--surface-border));
  background:
    radial-gradient(circle at 0 0, rgba(56,189,248,.11), transparent 44%),
    linear-gradient(145deg, rgba(15,23,42,.94), rgba(30,41,59,.84));
  box-shadow:0 14px 34px rgba(2,6,23,.20);
  overflow:hidden;
}
#ports-list .port-call-row::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, #38bdf8, #0878bd);
  opacity:.95;
}
body.light #ports-list .port-call-row{
  background:
    radial-gradient(circle at 0 0, rgba(14,165,233,.11), transparent 46%),
    linear-gradient(145deg, rgba(255,255,255,.99), rgba(248,250,252,.95));
  border-color:rgba(14,165,233,.24);
  box-shadow:0 14px 30px rgba(15,23,42,.09);
}

#ports-list .port-call-main{
  gap:13px;
}
#ports-list .port-call-title{
  gap:11px;
}
#ports-list .port-call-title-text{
  display:flex;
  flex-direction:column;
  min-width:0;
  gap:2px;
}
#ports-list .port-call-eyebrow{
  display:block;
  color:var(--accent);
  font-size:.61rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.15em;
  text-transform:uppercase;
}
#ports-list .port-call-name{
  font-size:1.04rem;
  line-height:1.18;
  font-weight:900;
  letter-spacing:-.01em;
}
#ports-list .port-call-icon{
  width:36px;
  height:36px;
  border-radius:12px;
  background:linear-gradient(145deg, rgba(56,189,248,.20), rgba(8,120,189,.12));
  border-color:rgba(56,189,248,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}

#ports-list .port-call-schedule{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:9px;
  padding-left:47px;
}
#ports-list .port-call-time-field{
  position:relative;
  gap:6px;
  padding:9px 10px 10px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  background:rgba(15,23,42,.32);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
body.light #ports-list .port-call-time-field{
  background:rgba(248,250,252,.88);
  border-color:rgba(148,163,184,.30);
}
#ports-list .port-call-time-label{
  display:flex;
  align-items:center;
  gap:5px;
  font-size:.61rem;
  line-height:1;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}
#ports-list .port-call-time-label b{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:17px;
  height:17px;
  border-radius:6px;
  font-size:.7rem;
  letter-spacing:0;
  color:#fff;
  background:rgba(56,189,248,.78);
}
#ports-list .port-call-time-allaboard .port-call-time-label b{
  background:rgba(34,197,94,.82);
}
#ports-list .port-call-time-departure .port-call-time-label b{
  background:rgba(8,120,189,.82);
}
#ports-list .port-call-time-field input{
  min-height:39px;
  padding:7px 9px;
  border-radius:10px;
  background:rgba(2,6,23,.32);
  font-size:.91rem;
  font-weight:850;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
body.light #ports-list .port-call-time-field input{
  background:#fff;
}
#ports-list .port-call-actions{
  padding-top:1px;
}
#ports-list .port-call-action-btn{
  width:36px;
  height:36px;
  background:rgba(148,163,184,.08);
  border:1px solid rgba(148,163,184,.16);
}

#ports-list .port-call-row.is-sea-day{
  background:
    radial-gradient(circle at 0 0, rgba(8,120,189,.12), transparent 46%),
    linear-gradient(145deg, rgba(15,23,42,.94), rgba(30,41,59,.84));
}
#ports-list .port-call-row.is-sea-day::before{
  background:linear-gradient(180deg, #0878bd, #38bdf8);
}

@media (max-width:700px){
  #ports-list .port-call-row,
  .trip-modal-body #ports-list .port-call-row{
    grid-template-columns:26px minmax(0,1fr) !important;
    padding:14px 12px 12px 14px !important;
    gap:9px !important;
    border-radius:18px !important;
  }
  #ports-list .port-call-move{
    padding-top:32px !important;
  }
  #ports-list .port-call-icon{
    width:34px;
    height:34px;
  }
  #ports-list .port-call-schedule{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:6px !important;
    padding-left:0 !important;
    margin-top:9px !important;
  }
  #ports-list .port-call-time-field{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    gap:6px !important;
    padding:8px 7px !important;
    border-radius:13px !important;
  }
  #ports-list .port-call-time-label{
    justify-content:center;
    gap:4px;
    font-size:.55rem !important;
    letter-spacing:.065em !important;
    white-space:nowrap;
  }
  #ports-list .port-call-time-label b{
    width:15px;
    height:15px;
    border-radius:5px;
    font-size:.62rem;
  }
  #ports-list .port-call-time-field input{
    min-height:38px !important;
    padding:7px 3px !important;
    font-size:14px !important;
    text-align:center !important;
  }
  #ports-list .port-call-time-field input::-webkit-date-and-time-value{
    text-align:center !important;
  }
  #ports-list .port-call-actions{
    margin-top:2px;
  }
}

@media (max-width:410px){
  #ports-list .port-call-schedule{
    grid-template-columns:1fr !important;
    gap:7px !important;
  }
  #ports-list .port-call-time-field{
    display:grid !important;
    grid-template-columns:105px minmax(0,1fr) !important;
    align-items:center !important;
    padding:8px 9px !important;
  }
  #ports-list .port-call-time-label{
    justify-content:flex-start;
  }
  #ports-list .port-call-time-field input{
    font-size:16px !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }
}

/* =========================================================
   iPHONE EDIT TRIP — TRUE FULL-SCREEN SHEET
   Keeps the Port of Call cards inside the usable viewport.
   ========================================================= */
@media (max-width: 820px){
  html:has(#trip-modal-backdrop[style*="display: flex"]),
  body:has(#trip-modal-backdrop[style*="display: flex"]){
    overflow:hidden !important;
    width:100% !important;
    height:100% !important;
  }

  #trip-modal-backdrop{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    padding:0 !important;
    margin:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    overflow:hidden !important;
  }

  #trip-modal-backdrop .modal.trip-modal{
    position:relative !important;
    inset:auto !important;
    width:100vw !important;
    max-width:100vw !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    border:0 !important;
    border-radius:0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    transform:none !important;
  }

  #trip-modal-backdrop .trip-modal-top{
    flex:0 0 auto !important;
    padding-top:max(10px, env(safe-area-inset-top, 0px)) !important;
    border-radius:0 !important;
  }

  #trip-modal-backdrop .trip-modal-body{
    width:100% !important;
    max-width:none !important;
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  #trip-modal-backdrop .trip-modal-body #trip-form-card,
  #trip-modal-backdrop .trip-modal-body #ports-list,
  #trip-modal-backdrop .trip-modal-body .ports-list{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  #trip-modal-backdrop .trip-modal-footer-dock{
    flex:0 0 auto !important;
    width:100% !important;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px)) !important;
    border-radius:0 !important;
  }

  #trip-modal-backdrop #ports-list .port-call-row{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  #trip-modal-backdrop #ports-list .port-call-main,
  #trip-modal-backdrop #ports-list .port-call-schedule,
  #trip-modal-backdrop #ports-list .port-call-time-field{
    min-width:0 !important;
    max-width:100% !important;
  }

  #trip-modal-backdrop #ports-list .port-call-time-field input{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
  }
}

/* =========================================================
   iPHONE EDIT TRIP — COMPACT CARD SPACING
   Removes the stacked outer padding around form sections and
   lets Port of Call cards use the available screen width.
   ========================================================= */
@media (max-width: 820px){
  #trip-modal-backdrop .trip-modal-body{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  #trip-modal-backdrop .trip-modal-body #trip-form-card{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  #trip-modal-backdrop #trip-form{
    width:100% !important;
    margin:0 !important;
  }

  #trip-modal-backdrop #trip-form .trip-form-section{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:8px !important;
    padding-right:8px !important;
  }

  #trip-modal-backdrop #trip-form .trip-form-section-ports{
    padding-left:7px !important;
    padding-right:7px !important;
  }

  #trip-modal-backdrop #trip-form .trip-form-section-ports > .trip-section-body{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  #trip-modal-backdrop #ports-list.ports-list{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    gap:9px !important;
  }

  #trip-modal-backdrop #ports-list .port-call-row{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:10px !important;
    padding-right:9px !important;
  }
}

@media (max-width: 430px){
  #trip-modal-backdrop .trip-modal-body{
    padding-left:4px !important;
    padding-right:4px !important;
  }

  #trip-modal-backdrop #trip-form .trip-form-section{
    padding-left:6px !important;
    padding-right:6px !important;
  }

  #trip-modal-backdrop #trip-form .trip-form-section-ports{
    padding-left:5px !important;
    padding-right:5px !important;
  }
}

/* =========================================================
   MVB PAYMENT TRACKER — COMPACT RESPONSIVE LAYOUT
   Keeps the premium card styling while removing wasted space.
========================================================= */
#trip-form .payment-tracker{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  column-gap:12px !important;
  row-gap:10px !important;
  align-items:end !important;
  padding:14px !important;
}

/* Tracker heading, summary, history and progress use full width. */
#trip-form .payment-tracker > label:first-child,
#trip-form .payment-tracker > .payment-summary,
#trip-form .payment-tracker > .payment-list,
#trip-form .payment-tracker > .payment-progress,
#trip-form .payment-tracker > .payment-empty{
  grid-column:1 / -1 !important;
}

/* Put each input field into a compact grid cell. */
#trip-form .payment-tracker .field:has(#trip-payment-date),
#trip-form .payment-tracker .field:has(#trip-payment-amount),
#trip-form .payment-tracker .field:has(#trip-payment-method),
#trip-form .payment-tracker .field:has(#trip-payment-note){
  min-width:0 !important;
  width:100% !important;
  margin:0 !important;
}

#trip-form .payment-tracker .field:has(#trip-payment-date),
#trip-form .payment-tracker .field:has(#trip-payment-amount){
  grid-row:auto !important;
}

#trip-form .payment-tracker .field label{
  margin:0 0 5px !important;
  font-size:.72rem !important;
  line-height:1.15 !important;
}

#trip-form .payment-tracker input{
  width:100% !important;
  min-width:0 !important;
  min-height:42px !important;
  padding:8px 11px !important;
}

/* Keep Add Payment close to the fields instead of floating in empty space. */
#trip-form .payment-tracker #trip-add-payment-btn{
  grid-column:1 / -1 !important;
  justify-self:end !important;
  width:auto !important;
  min-width:132px !important;
  min-height:38px !important;
  margin:0 !important;
  padding:7px 16px !important;
}

#trip-form .payment-tracker .payment-summary{
  margin:2px 0 0 !important;
  padding-top:9px !important;
}

#trip-form .payment-tracker .payment-list{
  margin-top:0 !important;
}

/* iPhone: stack fields, but keep the rhythm compact. */
@media (max-width:639px){
  #trip-form .payment-tracker{
    grid-template-columns:1fr !important;
    row-gap:9px !important;
    padding:12px !important;
  }

  #trip-form .payment-tracker > *,
  #trip-form .payment-tracker #trip-add-payment-btn{
    grid-column:1 !important;
  }

  #trip-form .payment-tracker #trip-add-payment-btn{
    justify-self:end !important;
  }
}

/* Wider desktop: slightly more breathing room without returning to tall spacing. */
@media (min-width:1100px){
  #trip-form .payment-tracker{
    column-gap:16px !important;
    row-gap:11px !important;
    padding:15px 16px !important;
  }
}

/* =========================================================
   MVB PAYMENT TRACKER — FINAL ULTRA-COMPACT FIELD LAYOUT
   Targets the actual nested .field-row wrappers so mobile
   Safari cannot stretch the payment fields vertically.
========================================================= */
#trip-form .payment-tracker{
  display:block !important;
  height:auto !important;
  min-height:0 !important;
  padding:12px !important;
}

#trip-form .payment-tracker > label{
  margin:0 0 9px !important;
}

#trip-form .payment-tracker .field-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:9px 10px !important;
  align-items:start !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 0 9px !important;
}

#trip-form .payment-tracker .field-row .field{
  width:100% !important;
  min-width:0 !important;
  height:auto !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  flex:none !important;
}

#trip-form .payment-tracker .field-row .field label{
  display:block !important;
  margin:0 0 4px !important;
  min-height:0 !important;
  font-size:.7rem !important;
  line-height:1.1 !important;
}

#trip-form .payment-tracker .field-row input,
#trip-form .payment-tracker .field-row select,
#trip-form .payment-tracker .field-row textarea{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  height:42px !important;
  min-height:42px !important;
  margin:0 !important;
  padding:7px 10px !important;
  border-radius:12px !important;
  font-size:.82rem !important;
}

#trip-form .payment-tracker #trip-add-payment-btn{
  display:flex !important;
  width:max-content !important;
  min-width:126px !important;
  min-height:36px !important;
  margin:1px 0 8px auto !important;
  padding:6px 14px !important;
}

#trip-form .payment-tracker .payment-progress,
#trip-form .payment-tracker .payment-summary,
#trip-form .payment-tracker .payment-list,
#trip-form .payment-tracker .payment-empty{
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
}

#trip-form .payment-tracker .payment-summary{
  margin-top:2px !important;
}

@media (max-width:430px){
  #trip-form .payment-tracker{
    padding:10px !important;
  }

  #trip-form .payment-tracker .field-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
    margin-bottom:8px !important;
  }

  #trip-form .payment-tracker .field-row input,
  #trip-form .payment-tracker .field-row select,
  #trip-form .payment-tracker .field-row textarea{
    height:40px !important;
    min-height:40px !important;
    padding:6px 8px !important;
    font-size:.78rem !important;
  }
}

@media (max-width:350px){
  #trip-form .payment-tracker .field-row{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   MVB PAYMENT TRACKER — FINAL RATIO LOCK
   Preserve the working compact 2×2 layout. Only rebalance
   the first row: narrower date, wider amount.
========================================================= */
#trip-form .payment-tracker .field-row.mvb-payment-primary-row{
  display:grid !important;
  grid-template-columns:minmax(0, 42fr) minmax(0, 58fr) !important;
  gap:8px !important;
  align-items:start !important;
  height:auto !important;
  min-height:0 !important;
}

#trip-form .payment-tracker .field-row.mvb-payment-secondary-row{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  align-items:start !important;
  height:auto !important;
  min-height:0 !important;
}

#trip-form .payment-tracker .mvb-payment-primary-row .field,
#trip-form .payment-tracker .mvb-payment-secondary-row .field{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  flex:none !important;
}

#trip-form .payment-tracker .mvb-payment-primary-row input,
#trip-form .payment-tracker .mvb-payment-secondary-row input{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

#trip-form .payment-tracker .mvb-payment-primary-row input[type="date"]{
  font-size:.72rem !important;
  padding-left:6px !important;
  padding-right:4px !important;
}

@media (max-width:350px){
  #trip-form .payment-tracker .field-row.mvb-payment-primary-row,
  #trip-form .payment-tracker .field-row.mvb-payment-secondary-row{
    grid-template-columns:1fr !important;
  }
}

/* =========================================================
   FINANCIAL — VOYAGE VISIBILITY & ALERTS
========================================================= */
.trip-form-section-financial .mvb-empty-field-row{
  display:none !important;
}

.trip-form-section-financial .mvb-financial-options{
  grid-column:1 / -1;
  width:100%;
  margin:6px 0 10px;
  padding:14px;
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--surface-border));
  border-radius:18px;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.10), transparent 48%),
    color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow:0 10px 26px rgba(15,23,42,.08);
}

.mvb-financial-options-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.mvb-financial-options-icon{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:grid;
  place-items:center;
  border-radius:12px;
  border:1px solid rgba(56,189,248,.30);
  background:rgba(56,189,248,.10);
  font-size:1rem;
}

.mvb-financial-options-title{
  color:var(--text);
  font-size:.86rem;
  font-weight:850;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.mvb-financial-options-subtitle{
  margin-top:2px;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.35;
}

.mvb-financial-options-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.mvb-financial-option{
  min-width:0;
  min-height:118px;
  margin:0 !important;
  padding:12px !important;
  border:1px solid var(--surface-border) !important;
  border-radius:15px;
  background:color-mix(in srgb, var(--input-bg) 82%, transparent);
  display:grid !important;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto 1fr;
  column-gap:9px !important;
  row-gap:5px !important;
  align-content:start;
  align-items:start;
}

.mvb-financial-option::before{
  grid-column:1;
  grid-row:1 / span 2;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:10px;
  font-size:.9rem;
  background:rgba(56,189,248,.10);
  border:1px solid rgba(56,189,248,.24);
}
.mvb-financial-option-ports::before{ content:'⚓'; }
.mvb-financial-option-excursions::before{ content:'🛶'; }
.mvb-financial-option-dashboard::before{ content:'👁'; }

.mvb-financial-option > label,
.mvb-financial-option .mvb-financial-option-label{
  grid-column:2;
  grid-row:1;
  min-width:0;
  margin:0 !important;
  color:var(--text) !important;
  font-size:.78rem !important;
  font-weight:800 !important;
  line-height:1.25;
  display:flex !important;
  align-items:flex-start;
  gap:7px;
  cursor:pointer;
}

.mvb-financial-option input[type="checkbox"]{
  width:17px !important;
  height:17px !important;
  min-width:17px;
  flex:0 0 17px;
  margin:1px 0 0 !important;
  padding:0 !important;
  accent-color:var(--accent);
}

.mvb-financial-option .help-text,
.mvb-financial-option .hint,
.mvb-financial-option small,
.mvb-financial-option p,
.mvb-financial-option .mvb-financial-option-help{
  grid-column:2;
  grid-row:2;
  margin:0 !important;
  color:var(--muted) !important;
  font-size:.69rem !important;
  line-height:1.42 !important;
  opacity:1 !important;
}

body.light .mvb-financial-options{
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.08), transparent 48%),
    rgba(255,255,255,.88);
  box-shadow:0 10px 24px rgba(15,23,42,.07);
}
body.light .mvb-financial-option{
  background:rgba(255,255,255,.78);
}

@media (max-width:900px){
  .mvb-financial-options-grid{ grid-template-columns:1fr; }
  .mvb-financial-option{ min-height:0; }
}

@media (max-width:600px){
  .trip-form-section-financial .mvb-financial-options{
    margin:4px 0 8px;
    padding:11px;
    border-radius:16px;
  }
  .mvb-financial-options-head{ margin-bottom:9px; }
  .mvb-financial-options-grid{ gap:8px; }
  .mvb-financial-option{
    padding:10px !important;
    border-radius:13px;
  }
}

/* =========================================================
   DATES SECTION — SAFE COMPACT MOBILE LAYOUT
   CSS-only: preserves the original collapsible section markup.
========================================================= */
@media (max-width: 820px){
  #trip-form .trip-form-section-dates{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:10px !important;
    row-gap:10px !important;
    align-items:start !important;
  }

  /* Keep headings, notices, and unrelated copy full width. */
  #trip-form .trip-form-section-dates > *{
    grid-column:1 / -1;
    min-width:0;
  }

  /* Pair the four existing rows without moving any DOM nodes. */
  #trip-form .trip-form-section-dates .field-row:has(#trip-start-date){
    grid-column:1 !important;
    grid-row:auto !important;
  }
  #trip-form .trip-form-section-dates .field-row:has(#trip-end-date){
    grid-column:2 !important;
    grid-row:auto !important;
  }
  #trip-form .trip-form-section-dates .field-row:has(#trip-pre-days){
    grid-column:1 !important;
    grid-row:auto !important;
  }
  #trip-form .trip-form-section-dates .field-row:has(#trip-post-days){
    grid-column:2 !important;
    grid-row:auto !important;
  }

  #trip-form .trip-form-section-dates .field-row:has(#trip-start-date),
  #trip-form .trip-form-section-dates .field-row:has(#trip-end-date),
  #trip-form .trip-form-section-dates .field-row:has(#trip-pre-days),
  #trip-form .trip-form-section-dates .field-row:has(#trip-post-days){
    display:block !important;
    width:100% !important;
    margin:0 !important;
    padding:0 !important;
    min-width:0 !important;
  }

  #trip-form .trip-form-section-dates .field-row:has(#trip-start-date) .field,
  #trip-form .trip-form-section-dates .field-row:has(#trip-end-date) .field,
  #trip-form .trip-form-section-dates .field-row:has(#trip-pre-days) .field,
  #trip-form .trip-form-section-dates .field-row:has(#trip-post-days) .field{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    gap:5px !important;
  }

  #trip-form .trip-form-section-dates label{
    font-size:.74rem !important;
    line-height:1.2 !important;
  }

  #trip-form .trip-form-section-dates #trip-start-date,
  #trip-form .trip-form-section-dates #trip-end-date,
  #trip-form .trip-form-section-dates #trip-pre-days,
  #trip-form .trip-form-section-dates #trip-post-days{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:48px !important;
    min-height:48px !important;
    padding:8px 10px !important;
    font-size:16px !important;
    border-radius:14px !important;
  }

  /* Remove the old oversized rhythm while retaining useful helper copy. */
  #trip-form .trip-form-section-dates .help-text,
  #trip-form .trip-form-section-dates .hint,
  #trip-form .trip-form-section-dates small{
    margin-top:2px !important;
    font-size:.66rem !important;
    line-height:1.3 !important;
  }

  #trip-form .trip-form-section-dates .trip-form-section-title{
    margin-bottom:2px !important;
  }
}

/* Very narrow phones: keep dates readable by stacking only Start/End. */
@media (max-width: 370px){
  #trip-form .trip-form-section-dates .field-row:has(#trip-start-date),
  #trip-form .trip-form-section-dates .field-row:has(#trip-end-date){
    grid-column:1 / -1 !important;
  }
}

/* =========================================================
   SHIP & CABIN — COMPACT RESPONSIVE LAYOUT
========================================================= */
.trip-form-section-ship .mvb-empty-field-row{
  display:none !important;
}

#trip-form .trip-form-section-ship .mvb-ship-cabin-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 14px;
  align-items:start;
  width:100%;
}

#trip-form .trip-form-section-ship .mvb-ship-field{
  grid-column:1 / -1;
}

#trip-form .trip-form-section-ship .mvb-ship-cabin-grid > .field{
  min-width:0;
  width:100%;
  margin:0 !important;
  gap:5px;
}

#trip-form .trip-form-section-ship .mvb-ship-cabin-grid label{
  margin:0 !important;
  font-size:.78rem;
  font-weight:800;
  line-height:1.25;
}

#trip-form .trip-form-section-ship .mvb-ship-cabin-grid input,
#trip-form .trip-form-section-ship .mvb-ship-cabin-grid select{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:46px;
  height:46px;
  padding:8px 12px;
  border-radius:14px;
  box-sizing:border-box;
}

#trip-form .trip-form-section-ship .mvb-stateroom-field .help-text,
#trip-form .trip-form-section-ship .mvb-stateroom-field small{
  margin:1px 0 0 !important;
  line-height:1.35;
}

@media (max-width:820px){
  #trip-form .trip-form-section-ship{
    padding-bottom:13px !important;
  }

  #trip-form .trip-form-section-ship .mvb-ship-cabin-grid{
    grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    gap:10px;
  }

  #trip-form .trip-form-section-ship .mvb-ship-field{
    grid-column:1 / -1;
  }

  #trip-form .trip-form-section-ship .mvb-ship-cabin-grid input,
  #trip-form .trip-form-section-ship .mvb-ship-cabin-grid select{
    min-height:44px;
    height:44px;
    font-size:.84rem;
    border-radius:13px;
  }

  #trip-form .trip-form-section-ship .ship-status{
    display:inline;
    margin-left:6px;
    font-size:.66rem;
  }
}

@media (max-width:390px){
  #trip-form .trip-form-section-ship .mvb-ship-cabin-grid{
    grid-template-columns:1fr;
  }
  #trip-form .trip-form-section-ship .mvb-ship-field,
  #trip-form .trip-form-section-ship .mvb-cabin-field,
  #trip-form .trip-form-section-ship .mvb-stateroom-field{
    grid-column:1;
  }
}

/* =========================================================
   FINANCIAL — COMPACT RESPONSIVE VALUE GRID
   Merged with the working Dates + Ship & Cabin fixes.
========================================================= */
.trip-form-section-financial .mvb-empty-field-row{
  display:none !important;
}

#trip-form .trip-form-section-financial .mvb-financial-values-grid{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px 14px;
  align-items:start;
  width:100%;
  margin:4px 0 10px;
}

#trip-form .trip-form-section-financial .mvb-financial-value-field{
  min-width:0;
  width:100%;
  max-width:100%;
  margin:0 !important;
  gap:5px;
  flex:none !important;
}

#trip-form .trip-form-section-financial .mvb-financial-value-field label{
  margin:0 !important;
  font-size:.78rem;
  font-weight:800;
  line-height:1.25;
}

#trip-form .trip-form-section-financial .mvb-financial-value-field input,
#trip-form .trip-form-section-financial .mvb-financial-value-field select{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  min-height:46px;
  height:46px;
  padding:8px 12px;
  border-radius:14px;
  box-sizing:border-box;
}

#trip-form .trip-form-section-financial .mvb-financial-options{
  margin-top:2px !important;
}

#trip-form .trip-form-section-financial .payment-tracker{
  margin-top:4px !important;
}

@media (max-width:820px){
  #trip-form .trip-form-section-financial{
    padding-bottom:13px !important;
  }

  #trip-form .trip-form-section-financial .mvb-financial-values-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    margin:2px 0 8px;
  }

  #trip-form .trip-form-section-financial .mvb-financial-value-field input,
  #trip-form .trip-form-section-financial .mvb-financial-value-field select{
    min-height:44px;
    height:44px;
    padding:7px 10px;
    font-size:.84rem;
    border-radius:13px;
  }

  #trip-form .trip-form-section-financial .mvb-financial-value-field label{
    font-size:.74rem;
  }
}

@media (max-width:350px){
  #trip-form .trip-form-section-financial .mvb-financial-values-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   FINANCIAL COLLAPSIBLE BODY — SINGLE CONTENT LAYER FIX
   Keeps values, visibility options and Payment Tracker together.
========================================================= */
#trip-form .trip-form-section-financial > .trip-section-body{
  display:flex;
  flex-direction:column;
  width:100%;
  min-width:0;
}

#trip-form .trip-form-section-financial > .mvb-financial-values-grid,
#trip-form .trip-form-section-financial > .mvb-financial-options,
#trip-form .trip-form-section-financial > .payment-tracker{
  display:none !important;
}


/* =========================================================
   FINANCIAL VISIBILITY PANEL — LIVE-SITE REPAIR SAFETY
   The valid panel inside the collapsible body must always display.
========================================================= */
#trip-form .trip-form-section-financial > .trip-section-body > .mvb-financial-options{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}

/* =========================================================
   PAYMENT TRACKER — IPHONE DATE/AMOUNT FIT + METHOD SELECT
========================================================= */
#trip-form .payment-tracker .mvb-payment-primary-row{
  overflow:visible !important;
}

#trip-form .payment-tracker .mvb-payment-primary-row .field{
  min-width:0 !important;
  overflow:hidden !important;
}

#trip-form .payment-tracker .mvb-payment-primary-row #trip-payment-date,
#trip-form .payment-tracker .mvb-payment-primary-row #trip-payment-amount{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  box-sizing:border-box !important;
}

#trip-form .payment-tracker .mvb-payment-method-storage{
  display:none !important;
}

#trip-form .payment-tracker .mvb-payment-method-select{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  height:40px !important;
  min-height:40px !important;
  margin:0 !important;
  padding:6px 30px 6px 8px !important;
  border-radius:12px !important;
  box-sizing:border-box !important;
  background-color:var(--input-bg) !important;
  color:var(--text) !important;
  border:1px solid var(--surface-border-2) !important;
  font:inherit !important;
  font-size:.78rem !important;
}

@media (max-width:430px){
  #trip-form .payment-tracker .field-row.mvb-payment-primary-row{
    grid-template-columns:minmax(0, 47%) minmax(0, 53%) !important;
    gap:8px !important;
  }

  #trip-form .payment-tracker .mvb-payment-primary-row #trip-payment-date{
    -webkit-appearance:none !important;
    appearance:none !important;
    font-size:.66rem !important;
    padding:6px 4px !important;
    text-align:center !important;
    overflow:hidden !important;
  }

  #trip-form .payment-tracker .mvb-payment-primary-row #trip-payment-amount{
    font-size:.76rem !important;
    padding:6px 8px !important;
  }
}

@media (max-width:360px){
  #trip-form .payment-tracker .field-row.mvb-payment-primary-row{
    grid-template-columns:1fr !important;
  }
}


/* =========================================================
   PAYMENT HISTORY — COMPACT REMOVE X + CONFIRMATION DIALOG
========================================================= */
.payment-row{
  position:relative;
  grid-template-columns:minmax(0,1fr) !important;
  padding:10px 42px 10px 10px !important;
  min-height:64px;
}
.payment-row-main{ min-width:0; }
.payment-remove-x{
  appearance:none;
  position:absolute;
  top:8px;
  right:8px;
  width:28px;
  height:28px;
  min-width:28px;
  min-height:28px;
  padding:0;
  border-radius:999px;
  border:1px solid rgba(248,113,113,.62);
  background:rgba(239,68,68,.08);
  color:#f87171;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font:800 1.05rem/1 system-ui,-apple-system,BlinkMacSystemFont,"SF Pro Text",sans-serif;
  cursor:pointer;
  transition:transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
  z-index:2;
}
.payment-remove-x:hover,
.payment-remove-x:focus-visible{
  background:rgba(239,68,68,.16);
  border-color:rgba(248,113,113,.90);
  box-shadow:0 0 0 3px rgba(239,68,68,.14);
  outline:none;
}
.payment-remove-x:active{ transform:scale(.94); }
body.light .payment-remove-x{
  background:rgba(239,68,68,.07);
  color:#dc2626;
  border-color:rgba(220,38,38,.42);
}

.payment-remove-confirm-overlay{
  position:fixed;
  inset:0;
  z-index:2147483647 !important;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(2,6,23,.68);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  transition:opacity .16s ease;
}
.payment-remove-confirm-overlay.is-open{ opacity:1; }
.payment-remove-confirm-card{
  width:min(420px,100%);
  border-radius:22px;
  border:1px solid color-mix(in srgb, var(--danger) 32%, var(--surface-border));
  background:
    radial-gradient(circle at top left, rgba(248,113,113,.10), transparent 44%),
    var(--surface-2);
  color:var(--text);
  box-shadow:0 24px 70px rgba(0,0,0,.48);
  padding:20px;
  transform:translateY(10px) scale(.985);
  transition:transform .16s ease;
}
.payment-remove-confirm-overlay.is-open .payment-remove-confirm-card{
  transform:translateY(0) scale(1);
}
.payment-remove-confirm-card h3{
  margin:0 0 10px;
  font-size:1.16rem;
  line-height:1.25;
}
.payment-remove-confirm-intro,
.payment-remove-confirm-warning{
  margin:0;
  color:var(--muted);
  font-size:.88rem;
  line-height:1.45;
}
.payment-remove-confirm-details{
  display:grid;
  gap:8px;
  margin:14px 0;
  padding:12px;
  border-radius:15px;
  border:1px solid var(--surface-border);
  background:color-mix(in srgb, var(--input-bg) 86%, transparent);
}
.payment-remove-confirm-detail{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap:16px;
  font-size:.86rem;
}
.payment-remove-confirm-detail span{ color:var(--muted); }
.payment-remove-confirm-detail strong{
  color:var(--text);
  text-align:right;
  overflow-wrap:anywhere;
}
.payment-remove-confirm-warning{
  margin-top:2px;
  font-weight:650;
}
.payment-remove-confirm-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:18px;
}
.payment-remove-confirm-actions .btn{
  min-height:44px;
  font-size:.86rem;
  font-weight:800;
}
.payment-remove-confirm{
  color:#fff !important;
  border-color:transparent !important;
  background:linear-gradient(135deg,#ef4444,#dc2626) !important;
  box-shadow:0 10px 22px rgba(220,38,38,.24);
}
.payment-remove-confirm:hover{ filter:brightness(1.06); }

@media (max-width:480px){
  .payment-remove-confirm-overlay{
    align-items:flex-end;
    padding:14px 14px calc(94px + env(safe-area-inset-bottom,0px));
  }
  .payment-remove-confirm-card{
    border-radius:22px;
    padding:18px;
  }
}


/* =========================================================
   PAYMENT HISTORY DISCLOSURE + PREMIUM PORT CARDS
========================================================= */
.payment-history-toggle{
  width:100%;
  grid-column:1 / -1;
  appearance:none;
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--surface-border));
  border-radius:16px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, var(--surface)), color-mix(in srgb, var(--accent-2) 8%, var(--surface)));
  color:var(--text);
  min-height:48px;
  padding:9px 13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 8px 20px rgba(2,6,23,.10);
}
.payment-history-toggle > span:first-child{ display:flex; align-items:baseline; gap:8px; min-width:0; }
.payment-history-toggle b{ font-size:.82rem; letter-spacing:.02em; }
.payment-history-toggle small{ color:var(--muted); font-size:.7rem; }
.payment-history-chevron{ font-size:1.15rem; transition:transform .18s ease; }
.payment-history-toggle.is-open .payment-history-chevron{ transform:rotate(180deg); }
#trip-payment-list[hidden]{ display:none !important; }

#ports-list .port-call-row{
  border-color:color-mix(in srgb, var(--accent) 34%, var(--surface-border)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 18px 42px rgba(2,6,23,.16) !important;
}
#ports-list .port-call-title{
  position:relative;
  padding:8px 10px;
  margin:-3px -3px 1px;
  border-radius:15px;
  background:linear-gradient(135deg, rgba(56,189,248,.08), rgba(8,120,189,.06));
  border:1px solid rgba(148,163,184,.12);
}
#ports-list .port-call-name{ font-size:1.12rem !important; letter-spacing:-.018em !important; }
#ports-list .port-call-access-badge{
  margin-left:auto;
  align-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 10px;
  border:1px solid var(--surface-border);
  border-radius:999px;
  font-size:.72rem;
  line-height:1;
  font-weight:900;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
#ports-list .port-call-access-badge--dock{
  color:#0284c7;
  border-color:rgba(14,165,233,.32);
  background:rgba(14,165,233,.10);
}
#ports-list .port-call-access-badge--tender{
  color:#ea580c;
  border-color:rgba(249,115,22,.34);
  background:rgba(249,115,22,.11);
}
body:not(.light) #ports-list .port-call-access-badge--dock{ color:#7dd3fc; background:rgba(14,165,233,.15); }
body:not(.light) #ports-list .port-call-access-badge--tender{ color:#fdba74; background:rgba(249,115,22,.15); }
#ports-list .port-call-time-arrival{ background:color-mix(in srgb, #38bdf8 8%, var(--surface)) !important; }
#ports-list .port-call-time-allaboard{ background:color-mix(in srgb, #22c55e 8%, var(--surface)) !important; }
#ports-list .port-call-time-departure{ background:color-mix(in srgb, #0878bd 9%, var(--surface)) !important; }
#ports-list .port-call-time-arrival input{ border-color:rgba(56,189,248,.42) !important; }
#ports-list .port-call-time-allaboard input{ border-color:rgba(34,197,94,.42) !important; }
#ports-list .port-call-time-departure input{ border-color:rgba(8,120,189,.42) !important; }
#ports-list .port-call-actions{
  grid-column:2;
  justify-content:space-between !important;
  width:100%;
  align-items:center;
}
#ports-list .port-call-visibility-pill{
  width:auto !important;
  min-width:0 !important;
  height:34px !important;
  padding:0 12px !important;
  border-radius:999px !important;
  color:var(--accent) !important;
  font-size:.68rem !important;
  font-weight:850 !important;
  white-space:nowrap;
  background:color-mix(in srgb, var(--accent) 9%, var(--surface)) !important;
  border-color:color-mix(in srgb, var(--accent) 42%, var(--surface-border)) !important;
}
#ports-list .port-call-row.is-hidden-port .port-call-visibility-pill{
  color:var(--muted) !important;
  border-style:dashed !important;
}
#ports-list .port-call-row.is-sea-day{
  min-height:150px !important;
  background:radial-gradient(circle at 10% 15%, rgba(56,189,248,.15), transparent 36%), linear-gradient(145deg, rgba(15,23,42,.96), rgba(39,28,78,.82)) !important;
}
body.light #ports-list .port-call-row.is-sea-day{
  background:radial-gradient(circle at 10% 15%, rgba(56,189,248,.14), transparent 36%), linear-gradient(145deg,#fff,#f3f0ff) !important;
}
@media (max-width:700px){
  #ports-list .port-call-title{ padding:7px 8px; }
  #ports-list .port-call-name{ font-size:1.02rem !important; }
  #ports-list .port-call-access-badge{ min-height:25px; padding:3px 8px; font-size:.64rem; }
  #ports-list .port-call-visibility-pill{ font-size:.62rem !important; padding:0 9px !important; }
  #ports-list .port-call-row.is-sea-day{ min-height:128px !important; }
}

/* Payment History toggle interaction safety */
#payment-history-toggle{
  position:relative;
  z-index:2;
  pointer-events:auto !important;
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent;
}
#trip-payment-list:not([hidden]){
  display:grid !important;
  visibility:visible !important;
  opacity:1 !important;
  pointer-events:auto !important;
}

/* =========================================================
   MOBILE EDIT TRIP — DATES, PORT TIMES & TRAVEL FIX (2026-08)
========================================================= */
@media (max-width: 820px){
  /* Dates: dependable 2 x 2 layout without relying only on :has(). */
  #trip-form .trip-form-section-dates.mvb-mobile-dates-ready{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px 10px !important;
    align-items:start !important;
  }
  #trip-form .trip-form-section-dates.mvb-mobile-dates-ready > *{
    grid-column:1 / -1;
    min-width:0 !important;
  }
  #trip-form .trip-form-section-dates .mvb-date-row{
    display:block !important;
    grid-column:auto !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
  }
  #trip-form .trip-form-section-dates .mvb-date-start-row,
  #trip-form .trip-form-section-dates .mvb-date-pre-row{ grid-column:1 !important; }
  #trip-form .trip-form-section-dates .mvb-date-end-row,
  #trip-form .trip-form-section-dates .mvb-date-post-row{ grid-column:2 !important; }
  #trip-form .trip-form-section-dates .mvb-date-field{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
  }
  #trip-form .trip-form-section-dates .mvb-date-field > input,
  #trip-form .trip-form-section-dates .mvb-date-field .mvb-day-stepper{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
  }

  /* Real pre/post day controls that work the same in Safari and installed PWAs. */
  .mvb-day-stepper{
    display:grid !important;
    grid-template-columns:44px minmax(0,1fr) 44px !important;
    align-items:stretch !important;
    min-height:48px !important;
    border:1px solid var(--surface-border-2) !important;
    border-radius:15px !important;
    overflow:hidden !important;
    background:var(--input-bg) !important;
  }
  .mvb-day-stepper input{
    width:100% !important;
    min-width:0 !important;
    height:48px !important;
    min-height:48px !important;
    padding:7px 3px !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    text-align:center !important;
    font-size:17px !important;
    font-weight:800 !important;
    appearance:textfield !important;
    -webkit-appearance:none !important;
  }
  .mvb-day-stepper input::-webkit-inner-spin-button,
  .mvb-day-stepper input::-webkit-outer-spin-button{ -webkit-appearance:none; margin:0; }
  .mvb-day-stepper-btn{
    appearance:none !important;
    border:0 !important;
    border-radius:0 !important;
    background:color-mix(in srgb, var(--accent) 10%, var(--surface)) !important;
    color:var(--text) !important;
    font-size:1.35rem !important;
    font-weight:800 !important;
    line-height:1 !important;
    padding:0 !important;
    min-width:0 !important;
  }
  .mvb-day-stepper-minus{ border-right:1px solid var(--surface-border) !important; }
  .mvb-day-stepper-plus{ border-left:1px solid var(--surface-border) !important; }
  .mvb-day-stepper-btn:active{ background:color-mix(in srgb, var(--accent) 22%, var(--surface)) !important; }

  /* Port time rows: prevent iOS time controls from using an oversized intrinsic width. */
  #trip-modal-backdrop #ports-list .port-call-schedule{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding-left:0 !important;
  }
  #trip-modal-backdrop #ports-list .port-call-time-field{
    display:grid !important;
    grid-template-columns:minmax(104px,42%) minmax(0,58%) !important;
    align-items:center !important;
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    padding:8px 9px !important;
  }
  #trip-modal-backdrop #ports-list .port-call-time-label{
    min-width:0 !important;
    justify-content:flex-start !important;
    white-space:nowrap !important;
  }
  #trip-modal-backdrop #ports-list .port-call-time-field input[type="time"]{
    display:block !important;
    box-sizing:border-box !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    height:44px !important;
    min-height:44px !important;
    margin:0 !important;
    padding:6px 7px !important;
    font-size:16px !important;
    text-align:center !important;
    -webkit-appearance:none !important;
    appearance:none !important;
    overflow:hidden !important;
  }
  #trip-modal-backdrop #ports-list .port-call-time-field input[type="time"]::-webkit-date-and-time-value{
    width:100% !important;
    min-width:0 !important;
    text-align:center !important;
  }

  /* Travel: grouped two-column layout with Hotel full width. */
  #trip-form .trip-form-section-travel.mvb-mobile-travel-ready .travel-grid,
  #trip-form .trip-form-section-travel.mvb-mobile-travel-ready .travel-grid-clean{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:12px 10px !important;
    width:100% !important;
  }
  #trip-form .trip-form-section-travel .mvb-travel-field,
  #trip-form .trip-form-section-travel .mvb-travel-row{
    min-width:0 !important;
    width:100% !important;
    margin:0 !important;
  }
  #trip-form .trip-form-section-travel .mvb-travel-field{
    padding:10px !important;
    border:1px solid rgba(148,163,184,.22) !important;
    border-radius:16px !important;
    background:color-mix(in srgb, var(--surface) 80%, transparent) !important;
  }
  body.light #trip-form .trip-form-section-travel .mvb-travel-field{
    background:rgba(248,250,252,.80) !important;
    border-color:rgba(148,163,184,.32) !important;
  }
  #trip-form .trip-form-section-travel .mvb-travel-field input{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:48px !important;
    margin:0 !important;
    font-size:16px !important;
  }
  #trip-form .trip-form-section-travel .mvb-travel-hotel,
  #trip-form .trip-form-section-travel .mvb-travel-hotel-row{
    grid-column:1 / -1 !important;
  }
}

@media (max-width: 370px){
  #trip-form .trip-form-section-dates.mvb-mobile-dates-ready,
  #trip-form .trip-form-section-travel.mvb-mobile-travel-ready .travel-grid,
  #trip-form .trip-form-section-travel.mvb-mobile-travel-ready .travel-grid-clean{
    grid-template-columns:1fr !important;
  }
  #trip-form .trip-form-section-dates .mvb-date-row,
  #trip-form .trip-form-section-travel .mvb-travel-row,
  #trip-form .trip-form-section-travel .mvb-travel-field{
    grid-column:1 !important;
  }
}



/* =========================================================
   MVB v8 — compact voyage notes popup
   ========================================================= */
.mvb-voyage-notes-btn{
  white-space: nowrap;
  cursor: pointer;
}
.mvb-voyage-notes-overlay{
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.mvb-voyage-notes-modal{
  width: min(560px, calc(100vw - 32px));
  max-height: min(680px, calc(100vh - 40px));
  display: flex;
  flex-direction: column;
}
.mvb-voyage-notes-subtitle{
  margin-top: 3px;
  font-size: .84rem;
  opacity: .72;
  max-width: 430px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mvb-voyage-notes-body{
  display: grid;
  gap: 10px;
  overflow: auto;
}
.mvb-voyage-note-item{
  display: grid;
  grid-template-columns: 26px minmax(0,1fr);
  gap: 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: rgba(148,163,184,.07);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.mvb-voyage-note-icon{
  text-align: center;
  opacity: .8;
}
.mvb-voyage-notes-footer{
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px 16px;
  border-top: 1px solid var(--card-border);
}
@media (max-width: 640px){
  .mvb-voyage-notes-overlay{ padding: 0; align-items: stretch; }
  .mvb-voyage-notes-modal{
    width: 100%;
    max-height: none;
    height: 100%;
    border-radius: 0 !important;
  }
  .mvb-voyage-notes-body{ flex: 1; }
}


/* =========================================================
   MVB v8 — NCL guest selector
   ========================================================= */
.mvb-import-guest-overlay{
  position: fixed;
  inset: 0;
  z-index: 100500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(2,6,23,.58);
  backdrop-filter: blur(9px) saturate(1.05);
  -webkit-backdrop-filter: blur(9px) saturate(1.05);
}
.mvb-import-guest-modal{
  width: min(540px, calc(100vw - 32px));
  border: 1px solid var(--card-border);
  border-radius: 22px;
  background: var(--surface-2);
  box-shadow: 0 28px 80px rgba(2,6,23,.38);
  overflow: hidden;
}
body.light .mvb-import-guest-modal{ background: rgba(255,255,255,.98); }
.mvb-import-guest-head{ padding: 18px 18px 14px; border-bottom: 1px solid var(--card-border); }
.mvb-import-guest-head h3{ margin: 0 0 5px; font-size: 1.08rem; }
.mvb-import-guest-head p{ margin: 0; opacity: .72; line-height: 1.4; font-size: .9rem; }
.mvb-import-guest-list{ display: grid; gap: 10px; padding: 14px 16px; max-height: min(440px, 55vh); overflow: auto; }
.mvb-import-guest-choice{
  appearance: none;
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 14px;
  align-items: center;
  text-align: left;
  padding: 14px 15px;
  border: 1px solid var(--card-border);
  border-radius: 14px;
  background: rgba(148,163,184,.07);
  color: inherit;
  cursor: pointer;
  font: inherit;
}
.mvb-import-guest-choice:hover,
.mvb-import-guest-choice:focus-visible{ border-color: rgba(56,189,248,.7); background: rgba(56,189,248,.09); outline: none; }
.mvb-import-guest-name{ font-weight: 750; min-width: 0; overflow-wrap: anywhere; }
.mvb-import-guest-fare{ opacity: .78; white-space: nowrap; font-size: .9rem; }
.mvb-import-guest-foot{ display: flex; justify-content: flex-end; padding: 12px 16px 16px; border-top: 1px solid var(--card-border); }
@media (max-width: 560px){
  .mvb-import-guest-choice{ grid-template-columns: 1fr; gap: 5px; }
  .mvb-import-guest-fare{ white-space: normal; }
}

/* =========================================================
   PATCH: Voyage Ready mobile full-screen modal
   Keeps the panel above the fixed mobile tab bar and gives
   the alert list its own reliable iPhone/Android scroll area.
========================================================= */
@media (max-width: 768px){
  .alerts-panel-overlay{
    position:fixed !important;
    inset:0 !important;
    z-index:2147483600 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .alerts-panel-modal{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    min-width:0 !important;
    max-width:none !important;
    height:100dvh !important;
    min-height:100dvh !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    border-radius:0 !important;
    border:0 !important;
    transform:none !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
    animation:none !important;
  }

  .alerts-panel-handle{
    display:none !important;
  }

  .alerts-panel-header{
    position:relative !important;
    top:auto !important;
    flex:0 0 auto !important;
    padding:
      max(14px, env(safe-area-inset-top, 0px))
      16px
      12px !important;
  }

  .alerts-panel-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    padding:12px 16px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

@supports not (height: 100dvh){
  @media (max-width: 768px){
    .alerts-panel-modal{
      height:100vh !important;
      min-height:100vh !important;
      max-height:100vh !important;
    }
  }
}


/* v38 — manual Port Access selector (Dock / Tender) */
#trip-form .mvb-port-add-row{align-items:end;}
#trip-form .mvb-port-name-field{flex:1 1 320px;}
#trip-form .mvb-port-access-field{flex:0 1 190px;min-width:160px;}
#trip-form .mvb-port-access-field label{display:block;margin:0 0 6px;font-size:.78rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);}
#trip-form #port-access-select{width:100%;min-height:46px;border-radius:16px;}
@media (max-width:700px){
  #trip-form .mvb-port-add-row{display:grid !important;grid-template-columns:1fr 1fr;gap:10px;}
  #trip-form .mvb-port-name-field{grid-column:1 / -1;}
  #trip-form .mvb-port-access-field{grid-column:1 / -1;min-width:0;}
  #trip-form #add-port-btn,#trip-form #add-sea-day-btn{width:100%;}
}


/* === NCL reservation re-import change review (v46) === */
.mvb-reservation-review-overlay{position:fixed;inset:0;z-index:2147483200;display:flex;align-items:center;justify-content:center;padding:22px;background:rgba(15,23,42,.58);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.mvb-reservation-review-dialog{width:min(820px,100%);max-height:min(86vh,900px);display:flex;flex-direction:column;overflow:hidden;border-radius:28px;background:var(--surface,#fff);color:var(--text,#0f172a);border:1px solid var(--surface-border,rgba(148,163,184,.3));box-shadow:0 30px 90px rgba(15,23,42,.28)}
.mvb-reservation-review-head{display:flex;gap:18px;align-items:flex-start;justify-content:space-between;padding:22px 24px 18px;border-bottom:1px solid var(--surface-border,rgba(148,163,184,.22))}
.mvb-reservation-review-head h3{margin:3px 0 6px;font-size:1.35rem;letter-spacing:-.025em}.mvb-reservation-review-head p{margin:0;color:var(--muted,#64748b);line-height:1.45}.mvb-reservation-review-kicker{font-size:.78rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#0284c7}
.mvb-res-review-close{width:44px;height:44px;flex:0 0 44px;border-radius:50%;border:1px solid var(--surface-border,rgba(148,163,184,.35));background:transparent;color:inherit;font-size:1.6rem;line-height:1;cursor:pointer}
.mvb-reservation-review-body{overflow:auto;padding:14px 18px;display:grid;gap:10px}.mvb-res-change-row{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--surface-border,rgba(148,163,184,.26));border-radius:18px;background:linear-gradient(135deg,rgba(56,189,248,.07),rgba(8,120,189,.045));cursor:pointer}.mvb-res-change-row input{margin-top:4px;width:18px;height:18px;accent-color:#0284c7}.mvb-res-change-copy{display:grid;gap:6px;min-width:0}.mvb-res-change-copy strong{font-size:.98rem}.mvb-res-change-values{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:9px;align-items:center;color:var(--muted,#64748b);font-size:.9rem}.mvb-res-change-values span:last-child{color:var(--text,#0f172a);font-weight:800}.mvb-res-change-copy small{color:var(--muted,#64748b);line-height:1.45}.mvb-reservation-review-foot{display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--surface-border,rgba(148,163,184,.22));background:var(--surface,#fff)}.mvb-res-up-to-date{padding:22px;text-align:center;font-weight:850;color:#15803d}.mvb-res-match-list{display:grid;gap:10px;padding:18px;overflow:auto}.mvb-res-match-card{text-align:left;display:grid;gap:4px;width:100%;padding:15px 16px;border-radius:18px;border:1px solid var(--surface-border,rgba(148,163,184,.3));background:linear-gradient(135deg,rgba(56,189,248,.07),rgba(8,120,189,.04));color:inherit;cursor:pointer}.mvb-res-match-card:hover{border-color:rgba(14,165,233,.6)}.mvb-res-match-card strong{font-size:1rem}.mvb-res-match-card span{font-size:.88rem;color:var(--muted,#64748b)}
@media(max-width:700px){.mvb-reservation-review-overlay{padding:0;align-items:flex-end}.mvb-reservation-review-dialog{width:100%;max-height:92dvh;border-radius:26px 26px 0 0}.mvb-reservation-review-head{padding:18px 16px 14px}.mvb-reservation-review-body{padding:10px 12px}.mvb-res-change-values{grid-template-columns:1fr}.mvb-res-change-values b{display:none}.mvb-res-change-values span:first-child:before{content:'Current: ';font-weight:700}.mvb-res-change-values span:last-child:before{content:'NCL: ';font-weight:700}.mvb-reservation-review-foot{padding:12px;position:sticky;bottom:0}.mvb-reservation-review-foot .btn{flex:1}}


/* MVB_PRIORITY_TENDER_INTELLIGENCE_V1 */
.port-call-priority-tender-badge{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  margin-left:8px;padding:7px 11px;border-radius:999px;white-space:nowrap;
  border:1px solid rgba(245,158,11,.38);
  background:linear-gradient(135deg,rgba(254,243,199,.88),rgba(255,247,237,.82));
  color:#9a5800;font-weight:900;font-size:.78rem;line-height:1;
  box-shadow:0 6px 16px rgba(146,64,14,.08);
}
.mvb-port-badge--priority-tender{
  border-color:rgba(245,158,11,.38)!important;
  background:linear-gradient(135deg,rgba(254,243,199,.88),rgba(255,247,237,.82))!important;
  color:#9a5800!important;font-weight:900!important;
}
body:not(.light) .port-call-priority-tender-badge,
body:not(.light) .mvb-port-badge--priority-tender{
  background:linear-gradient(135deg,rgba(245,158,11,.18),rgba(251,146,60,.12))!important;
  border-color:rgba(251,191,36,.34)!important;color:#fcd34d!important;
}
@media(max-width:700px){
  .port-call-priority-tender-badge{margin-left:0;margin-top:6px;padding:6px 9px;font-size:.72rem;}
}

/* =========================================================
   MVB v56 — mobile Voyage Notes + Import Center
   ========================================================= */
.mvb-import-history-body{display:grid;gap:10px;overflow:auto;}
.mvb-import-current,.mvb-import-history-card,.mvb-import-history-empty{border:1px solid var(--card-border);border-radius:14px;padding:13px 14px;background:rgba(148,163,184,.07);}
.mvb-import-current{display:flex;justify-content:space-between;gap:12px;align-items:center;}
.mvb-import-history-card-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;}
.mvb-import-history-card-head span,.mvb-import-history-summary,.mvb-import-history-changes,.mvb-import-history-doc,.mvb-import-history-empty span{font-size:.86rem;opacity:.76;}
.mvb-import-history-summary,.mvb-import-history-changes,.mvb-import-history-doc{margin-top:6px;}
.mvb-import-history-empty{display:grid;gap:6px;text-align:center;padding:22px 16px;}
.mvb-import-history-modal{width:min(620px,calc(100vw - 32px));max-height:min(720px,calc(100vh - 40px));display:flex;flex-direction:column;}
@media (max-width:640px){
  .mvb-voyage-notes-overlay,.mvb-import-history-overlay{padding:0!important;align-items:stretch!important;justify-content:stretch!important;}
  .mvb-voyage-notes-modal,.mvb-import-history-modal{box-sizing:border-box!important;width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;overflow:hidden!important;}
  .mvb-voyage-notes-modal .status-help-header,.mvb-import-history-modal .status-help-header{box-sizing:border-box;width:100%;padding:calc(14px + env(safe-area-inset-top)) 18px 14px!important;flex:0 0 auto;}
  .mvb-voyage-notes-body,.mvb-import-history-body{box-sizing:border-box!important;width:100%!important;min-width:0!important;flex:1 1 auto!important;display:grid!important;align-content:start!important;grid-auto-rows:max-content!important;gap:10px!important;padding:14px 16px!important;overflow-y:auto!important;overflow-x:hidden!important;-webkit-overflow-scrolling:touch;}
  .mvb-voyage-note-item{box-sizing:border-box!important;width:100%!important;min-height:0!important;height:auto!important;grid-template-columns:28px minmax(0,1fr)!important;padding:13px 14px!important;}
  .mvb-voyage-note-item>div{min-width:0!important;white-space:normal!important;overflow-wrap:anywhere!important;}
  .mvb-voyage-notes-footer{box-sizing:border-box;width:100%;flex:0 0 auto;padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;background:var(--card-bg,#fff);}
  .mvb-voyage-notes-footer .btn{width:100%;min-height:46px;}
  .mvb-import-history-card-head{display:grid;gap:3px;}
}


/* =========================================================
   MVB v57 — iPhone Voyage Notes viewport hard fix
   Keep these popups independent of the generic status sheet.
   ========================================================= */
body.mvb-voyage-notes-open,body.mvb-import-history-open{overflow:hidden!important;}
body.mvb-voyage-notes-open .mobile-tabs,body.mvb-voyage-notes-open .bottom-nav,
body.mvb-import-history-open .mobile-tabs,body.mvb-import-history-open .bottom-nav{visibility:hidden!important;}
@media (max-width:640px){
  #mvb-voyage-notes-overlay,#mvb-import-history-overlay{
    position:fixed!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
    width:auto!important;height:auto!important;min-width:0!important;max-width:none!important;
    margin:0!important;padding:0!important;transform:none!important;overflow:hidden!important;
    z-index:1000005!important;display:block!important;background:var(--bg,#071225)!important;
  }
  #mvb-voyage-notes-overlay .mvb-voyage-notes-modal,
  #mvb-import-history-overlay .mvb-import-history-modal{
    position:absolute!important;inset:0!important;left:0!important;right:0!important;top:0!important;bottom:0!important;
    box-sizing:border-box!important;width:auto!important;min-width:0!important;max-width:none!important;
    height:auto!important;min-height:0!important;max-height:none!important;margin:0!important;padding:0!important;
    transform:none!important;border:0!important;border-radius:0!important;overflow:hidden!important;
    display:flex!important;flex-direction:column!important;
  }
  #mvb-voyage-notes-overlay .status-help-header,
  #mvb-import-history-overlay .status-help-header{
    position:relative!important;top:auto!important;left:auto!important;right:auto!important;
    width:auto!important;min-width:0!important;margin:0!important;
    padding:calc(12px + env(safe-area-inset-top)) 16px 12px!important;
  }
  #mvb-voyage-notes-overlay .status-help-header>div:first-child,
  #mvb-import-history-overlay .status-help-header>div:first-child{min-width:0!important;overflow:hidden!important;}
  #mvb-voyage-notes-overlay .mvb-voyage-notes-body,
  #mvb-import-history-overlay .mvb-import-history-body{
    width:auto!important;min-width:0!important;margin:0!important;padding:14px 16px!important;
    flex:1 1 0!important;overflow-y:auto!important;overflow-x:hidden!important;
  }
  #mvb-voyage-notes-overlay .mvb-voyage-note-item{
    width:auto!important;min-width:0!important;margin:0!important;padding:13px 14px!important;
    grid-template-columns:28px minmax(0,1fr)!important;
  }
  #mvb-voyage-notes-overlay .mvb-voyage-notes-footer,
  #mvb-import-history-overlay .mvb-voyage-notes-footer{
    width:auto!important;margin:0!important;padding:10px 16px calc(10px + env(safe-area-inset-bottom))!important;
    flex:0 0 auto!important;
  }
}


/* =========================================================
   v58 — Add Voyage guided desktop flow
   Keeps Edit Voyage unchanged; reorganizes only Add Voyage.
========================================================= */
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap:18px;
  row-gap:18px;
  align-items:start;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form > #trip-id{
  display:none;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form > .mvb-add-voyage-flow{
  grid-column:1 / -1;
  order:1;
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(480px,1fr);
  gap:22px;
  align-items:center;
  padding:18px 20px;
  margin:0 0 2px;
  border:1px solid rgba(56,189,248,.22);
  border-radius:22px;
  background:linear-gradient(135deg,rgba(14,165,233,.10),rgba(7,91,169,.06));
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-copy{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-kicker{
  color:#0ea5e9;
  font-size:.68rem;
  font-weight:950;
  letter-spacing:.20em;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-copy strong{
  color:var(--text);
  font-size:1.08rem;
  line-height:1.2;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-copy > span:last-child{
  color:var(--muted);
  font-size:.84rem;
  line-height:1.35;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-steps .mvb-add-flow-step{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  min-height:42px;
  padding:8px 10px;
  border:1px solid rgba(148,163,184,.22);
  border-radius:14px;
  background:rgba(255,255,255,.48);
  color:var(--muted);
  font-size:.75rem;
  font-weight:850;
  white-space:nowrap;
}
body.dark #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-steps .mvb-add-flow-step{
  background:rgba(15,23,42,.38);
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-steps .mvb-add-flow-step b{
  display:inline-grid;
  place-items:center;
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(14,165,233,.13);
  color:#0284c7;
  font-size:.72rem;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-step{
  appearance:none;
  border:1px solid var(--border);
  font:inherit;
  color:inherit;
  cursor:pointer;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-step:hover,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-step:focus-visible{
  transform:translateY(-1px);
  border-color:rgba(14,165,233,.42);
  box-shadow:0 7px 18px rgba(14,165,233,.10);
  outline:none;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-step.is-current{
  border-color:rgba(14,165,233,.48);
  background:rgba(14,165,233,.08);
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section{
  scroll-margin-top:92px;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section.mvb-add-step-arrival{
  animation:mvbAddStepArrival 1.05s ease;
}
@keyframes mvbAddStepArrival{
  0%,100%{box-shadow:var(--shadow, 0 10px 30px rgba(15,23,42,.06));}
  35%{box-shadow:0 0 0 3px rgba(14,165,233,.18),0 15px 34px rgba(14,165,233,.12);}
}
@media (prefers-reduced-motion:reduce){
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section.mvb-add-step-arrival{animation:none;}
}

/* Put the form in the order people actually build a cruise. */
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-basics{grid-column:span 5;order:10;}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-dates{grid-column:span 7;order:20;}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-ship{grid-column:1 / -1;order:30;}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-ports{grid-column:1 / -1;order:40;}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel{grid-column:1 / -1;order:50;}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-addons{grid-column:1 / -1;order:60;}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-financial{grid-column:1 / -1;order:70;}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-notes{grid-column:1 / -1;order:80;}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form > .form-footer{grid-column:1 / -1;order:90;}

#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section{
  margin:0 !important;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-basics,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-dates{
  height:100%;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-basics > .trip-section-body,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-dates > .trip-section-body{
  min-height:144px;
}

/* Step identity without adding more visual clutter. */
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-basics::after,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-dates::after,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-ship::after,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-ports::after,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel::after,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-addons::after,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-financial::after,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-notes::after{
  position:absolute;
  top:20px;
  right:58px;
  color:var(--muted);
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.12em;
  opacity:.62;
  pointer-events:none;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-basics::after{content:"1 · VOYAGE";}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-dates::after{content:"1 · VOYAGE";}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-ship::after,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-ports::after{content:"2 · SAILING";}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel::after{content:"3 · TRAVEL";}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-addons::after,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-financial::after,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-notes::after{content:"4 · OPTIONAL";}

/* Add mode is intentionally a little tighter than Edit mode. */
@media (min-width:821px){
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section{
    padding:20px 22px 19px !important;
  }
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-title{
    margin-bottom:14px !important;
    padding-bottom:12px !important;
  }
}

@media (max-width:1100px){
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form > .mvb-add-voyage-flow{
    grid-template-columns:1fr;
  }
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-steps{
    grid-template-columns:repeat(4,minmax(120px,1fr));
    overflow-x:auto;
    padding-bottom:2px;
  }
}

@media (max-width:820px){
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form > .mvb-add-voyage-flow{
    width:100%;
    padding:14px;
    border-radius:18px;
    gap:12px;
  }
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-steps{
    grid-template-columns:repeat(2,minmax(0,1fr));
    overflow:visible;
  }
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .mvb-add-flow-steps .mvb-add-flow-step{
    justify-content:flex-start;
    white-space:normal;
  }
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-basics,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-dates,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-ship,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-ports,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-addons,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-financial,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-notes{
    width:100%;
  }
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-basics > .trip-section-body,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-dates > .trip-section-body{
    min-height:0;
  }
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section::after{
    display:none;
  }
}


/* v68 — voyage-level stats belong with Basics */
#trip-form .trip-form-section-basics .mvb-basics-stats-row{
  margin-top:16px;
  gap:16px;
}
#trip-form .trip-form-section-basics .mvb-basics-stats-row > .field{
  min-width:0;
}
@media (max-width:820px){
  #trip-form .trip-form-section-basics .mvb-basics-stats-row{
    grid-template-columns:1fr;
  }
}

/* v70 — Financial primary controls */
#trip-form .mvb-financial-primary-row{align-items:flex-start;}
#trip-form .mvb-cruise-cost-field .mvb-paid-in-full-check{margin-top:12px;display:flex;align-items:center;gap:8px;font-weight:800;}
#trip-form .mvb-cruise-cost-field .mvb-paid-in-full-check input{width:auto;min-height:0;}
#trip-form .payment-tracker[hidden]{display:none !important;}
@media (max-width:700px){
  #trip-form .mvb-financial-primary-row{grid-template-columns:1fr;}
}

/* === v72 Add Voyage: cleaner Travel step === */
#trip-form .trip-form-section-travel .mvb-travel-group{display:contents;}
#trip-form .trip-form-section-travel .mvb-travel-group-head{display:none;}

#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .travel-grid-clean{
  display:flex;
  flex-direction:column;
  gap:18px;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-group{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px 18px;
  padding:18px;
  border:1px solid rgba(100,116,139,.18);
  border-radius:20px;
  background:rgba(255,255,255,.46);
}
body:not(.light) #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-group{
  background:rgba(255,255,255,.028);
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-group-head{
  display:flex;
  grid-column:1/-1;
  align-items:center;
  gap:11px;
  padding-bottom:12px;
  margin-bottom:2px;
  border-bottom:1px solid rgba(100,116,139,.14);
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-group-head > span{
  width:38px;height:38px;display:grid;place-items:center;flex:0 0 38px;
  border-radius:12px;background:rgba(14,165,233,.09);border:1px solid rgba(14,165,233,.16);
  font-size:1.05rem;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-group-head strong{
  display:block;color:var(--text);font-size:1rem;font-weight:950;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-group-head small{
  display:block;margin-top:2px;color:var(--muted);font-size:.78rem;font-weight:700;
}

/* Airfare belongs with flight numbers; make it a compact continuation instead of a second hero card. */
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .flight-cost-card{
  grid-column:1/-1;
  padding:14px 16px;
  border-radius:16px;
  box-shadow:none;
  background:rgba(14,165,233,.035);
}
body:not(.light) #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .flight-cost-card{
  background:rgba(14,165,233,.035);
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .flight-cost-head{
  margin-bottom:12px;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .flight-cost-icon{
  width:36px;height:36px;flex-basis:36px;border-radius:11px;font-size:1rem;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .flight-cost-title{font-size:.96rem;}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .flight-cost-subtitle{font-size:.78rem;}

/* Ground transfer pair and hotel/parking pair read as matched choices. */
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-ground .transport-cost-card,
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-stay .travel-extra-cost-card{
  margin:0;
  min-width:0;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-stay .travel-field-wide{
  grid-column:auto;
}
#trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-stay .travel-extra-cost-grid{
  grid-template-columns:1fr;
}

@media(max-width:820px){
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-group{
    grid-template-columns:1fr;
    gap:13px;
    padding:14px;
    border-radius:18px;
  }
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .mvb-travel-group-head,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) .trip-form-section-travel .flight-cost-card{
    grid-column:auto;
  }
}

/* =========================================================
   v75 — Button-style financial/service toggles
   Keep native checkboxes for existing save/import logic, but
   present the controls as clear on/off buttons.
   ========================================================= */
#trip-form .mvb-toggle-button{
  display:inline-flex;
  align-items:center;
  position:relative;
  margin:0;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#trip-form .mvb-toggle-button > input{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  min-height:0 !important;
  opacity:0;
  pointer-events:none;
}
#trip-form .mvb-toggle-button > span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:10px 16px;
  border:1px solid rgba(100,116,139,.28);
  border-radius:14px;
  background:rgba(255,255,255,.72);
  color:var(--text,#0f172a);
  font-weight:800;
  line-height:1.15;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
#trip-form .mvb-toggle-button:hover > span{
  border-color:rgba(14,165,233,.42);
  box-shadow:0 6px 18px rgba(15,23,42,.07);
}
#trip-form .mvb-toggle-button:active > span{transform:translateY(1px)}
#trip-form .mvb-toggle-button > input:focus-visible + span{
  outline:3px solid rgba(14,165,233,.24);
  outline-offset:2px;
}
#trip-form .mvb-toggle-button > input:checked + span{
  border-color:rgba(34,197,94,.45);
  background:rgba(34,197,94,.12);
  color:#15803d;
  box-shadow:0 0 0 1px rgba(34,197,94,.06) inset;
}
#trip-form .mvb-paid-in-full-toggle{
  margin-top:12px;
  width:100%;
}
#trip-form .mvb-paid-in-full-toggle > span{
  width:100%;
  min-height:50px;
  border-radius:16px;
  font-size:.98rem;
  justify-content:flex-start;
}
#trip-form .mvb-paid-in-full-toggle > input:not(:checked) + span::after{
  content:"Off";
  margin-left:auto;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(100,116,139,.10);
  color:var(--muted,#64748b);
  font-size:.72rem;
  font-weight:800;
}
#trip-form .mvb-paid-in-full-toggle > input:checked + span::after{
  content:"On";
  margin-left:auto;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(34,197,94,.16);
  color:#15803d;
  font-size:.72rem;
  font-weight:900;
}
@media(max-width:700px){
  #trip-form .mvb-paid-in-full-toggle > span{min-height:48px}
}


/* v76 — contextual voyage alert / visibility toggles */
#trip-form .mvb-context-toggle{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  margin-top:16px; padding:14px 16px; border:1px solid var(--line, #d7e1eb);
  border-radius:18px; background:rgba(248,251,255,.72);
}
#trip-form .mvb-context-toggle-copy{display:flex;flex-direction:column;gap:3px;min-width:0}
#trip-form .mvb-context-toggle-copy strong{font-size:15px;color:var(--text,#142033)}
#trip-form .mvb-context-toggle-copy small{font-size:12px;line-height:1.35;color:var(--muted,#66758b)}
#trip-form .mvb-context-toggle-btn{
  flex:0 0 auto; min-width:86px; min-height:42px; border-radius:999px;
  border:1px solid var(--line,#cfd9e5); background:rgba(255,255,255,.9);
  font:700 13px/1 system-ui,sans-serif; color:var(--muted,#64748b); cursor:pointer;
}
#trip-form .mvb-context-toggle-btn.is-on{
  border-color:rgba(16,185,129,.45); background:rgba(16,185,129,.12); color:#087a55;
}
#trip-form #mvb-dashboard-visibility-toggle{margin-top:18px}
#trip-form #mvb-dashboard-visibility-toggle[hidden]{display:none!important}
@media(max-width:700px){
  #trip-form .mvb-context-toggle{padding:12px 13px;gap:10px}
  #trip-form .mvb-context-toggle-btn{min-width:74px;min-height:40px}
}


/* =========================================================
   v80 — Shareholder benefit button toggles
   Match the service-charge / paid-in-full control language
   while preserving the existing checkbox-backed logic.
   ========================================================= */
#trip-form .mvb-shareholder-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
#trip-form .mvb-shareholder-toggle > span{
  min-height:44px;
  padding:10px 14px;
  border-radius:14px;
  justify-content:flex-start;
}
#trip-form .mvb-shareholder-toggle > input:not(:checked) + span::after{
  content:"Off";
  margin-left:12px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(100,116,139,.10);
  color:var(--muted,#64748b);
  font-size:.72rem;
  font-weight:850;
}
#trip-form .mvb-shareholder-toggle > input:checked + span::after{
  content:"On";
  margin-left:12px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(14,165,233,.14);
  color:#0369a1;
  font-size:.72rem;
  font-weight:900;
}
#trip-form .mvb-shareholder-submitted-toggle > input:checked + span{
  background:rgba(14,165,233,.10);
  border-color:rgba(14,165,233,.38);
  color:#0369a1;
}
#trip-form .mvb-shareholder-received-toggle > input:checked + span{
  background:rgba(34,197,94,.12);
  border-color:rgba(34,197,94,.44);
  color:#15803d;
}
#trip-form .mvb-shareholder-received-toggle > input:checked + span::after{
  background:rgba(34,197,94,.16);
  color:#15803d;
}
@media(max-width:700px){
  #trip-form .mvb-shareholder-actions{display:grid;grid-template-columns:1fr}
  #trip-form .mvb-shareholder-toggle,
  #trip-form .mvb-shareholder-toggle > span{width:100%}
  #trip-form .mvb-shareholder-toggle > span::after{margin-left:auto!important}
}


/* v81 — permanently suppress legacy visibility/alert wrappers after their
   checkbox inputs are moved into contextual toggle cards. */
#trip-form .mvb-legacy-context-field,
#trip-form .mvb-legacy-context-row{
  display:none !important;
  visibility:hidden !important;
  height:0 !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  border:0 !important;
  overflow:hidden !important;
}

/* =========================================================
   v91 — Dark-mode consistency for voyage toggles + flights
   Keep Edit Voyage controls on the same dark surface language.
   ========================================================= */
body:not(.light) #trip-form .mvb-context-toggle{
  background:linear-gradient(135deg, rgba(16,30,50,.94), rgba(17,25,45,.94));
  border-color:rgba(56,189,248,.24);
  box-shadow:0 10px 24px rgba(0,0,0,.12);
}
body:not(.light) #trip-form .mvb-context-toggle-copy strong{
  color:var(--text,#f8fafc);
}
body:not(.light) #trip-form .mvb-context-toggle-copy small{
  color:var(--muted,#94a3b8);
}
body:not(.light) #trip-form .mvb-context-toggle-btn{
  background:rgba(15,23,42,.84);
  border-color:rgba(148,163,184,.28);
  color:var(--muted,#a8b3c5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
body:not(.light) #trip-form .mvb-context-toggle-btn.is-on{
  background:rgba(16,185,129,.14);
  border-color:rgba(52,211,153,.46);
  color:#6ee7b7;
}

body:not(.light) #trip-form .mvb-toggle-button > span{
  background:rgba(15,23,42,.82);
  border-color:rgba(148,163,184,.26);
  color:var(--text,#f8fafc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
body:not(.light) #trip-form .mvb-toggle-button:hover > span{
  background:rgba(20,32,52,.92);
  border-color:rgba(56,189,248,.42);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
body:not(.light) #trip-form .mvb-toggle-button > input:checked + span{
  background:rgba(34,197,94,.14);
  border-color:rgba(74,222,128,.42);
  color:#86efac;
}

body:not(.light) .trip-row.mvb-renderer-trip-row .trip-flight-row,
body:not(.light) .trip-flight-row{
  background:linear-gradient(135deg, rgba(28,43,66,.96), rgba(22,32,51,.96)) !important;
  border-color:rgba(148,163,184,.25) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025) !important;
}
body:not(.light) .trip-row.mvb-renderer-trip-row .trip-flight-title,
body:not(.light) .trip-flight-title{
  color:var(--text,#f8fafc) !important;
}
body:not(.light) .trip-row.mvb-renderer-trip-row .trip-flight-sub,
body:not(.light) .trip-flight-sub{
  color:var(--muted,#a8b3c5) !important;
}
body:not(.light) .trip-row.mvb-renderer-trip-row .trip-flight-actions .trip-flight-track-btn{
  background:rgba(15,23,42,.72) !important;
  border-color:rgba(148,163,184,.30) !important;
  color:var(--text,#f8fafc) !important;
}
body:not(.light) .trip-row.mvb-renderer-trip-row .trip-flight-actions .trip-flight-edit-btn{
  color:var(--muted,#a8b3c5) !important;
}


/* v145 — compact MyVoyage Sea Travel import controls */
#trip-form .trip-form-section-travel .mvb-travel-import-action{
  grid-column:1 / -1 !important;
  width:100% !important;
  min-width:0 !important;
  display:block !important;
}

#trip-form .trip-form-section-travel #import-flight-btn,
#trip-form .trip-form-section-travel #import-transport-btn,
#trip-form .trip-form-section-travel #import-hotel-btn,
#trip-form .trip-form-section-travel #import-parking-btn{
  appearance:none !important;
  -webkit-appearance:none !important;
  width:100% !important;
  min-width:0 !important;
  min-height:54px !important;
  margin:0 !important;
  padding:8px 12px !important;
  display:grid !important;
  grid-template-columns:36px minmax(0,1fr) 18px !important;
  align-items:center !important;
  gap:10px !important;
  border:1px solid rgba(14,165,233,.28) !important;
  border-radius:15px !important;
  background:linear-gradient(135deg,rgba(14,165,233,.085),rgba(99,102,241,.035)) !important;
  color:var(--text) !important;
  box-shadow:none !important;
  text-align:left !important;
  white-space:normal !important;
  overflow:hidden !important;
  cursor:pointer !important;
  font:inherit !important;
}

#trip-form .trip-form-section-travel #import-flight-btn:hover,
#trip-form .trip-form-section-travel #import-transport-btn:hover,
#trip-form .trip-form-section-travel #import-hotel-btn:hover,
#trip-form .trip-form-section-travel #import-parking-btn:hover{
  border-color:rgba(14,165,233,.46) !important;
  background:linear-gradient(135deg,rgba(14,165,233,.13),rgba(99,102,241,.055)) !important;
}

#trip-form .trip-form-section-travel .mvb-travel-import-icon{
  width:36px !important;
  height:36px !important;
  display:grid !important;
  place-items:center !important;
  border-radius:11px !important;
  background:rgba(14,165,233,.11) !important;
  border:1px solid rgba(14,165,233,.18) !important;
  font-size:1rem !important;
  line-height:1 !important;
}

#trip-form .trip-form-section-travel .mvb-travel-import-label{
  min-width:0 !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:var(--text) !important;
  font-size:.88rem !important;
  font-weight:900 !important;
  line-height:1.2 !important;
}

#trip-form .trip-form-section-travel .mvb-travel-import-arrow{
  justify-self:end !important;
  color:var(--muted) !important;
  font-size:1.4rem !important;
  line-height:1 !important;
}

#trip-form .trip-form-section-travel .mvb-travel-import-note{
  display:block !important;
  margin:6px 4px 0 !important;
  color:var(--muted) !important;
  font-size:.72rem !important;
  font-weight:650 !important;
  line-height:1.3 !important;
}

body:not(.light) #trip-form .trip-form-section-travel #import-flight-btn,
body:not(.light) #trip-form .trip-form-section-travel #import-transport-btn,
body:not(.light) #trip-form .trip-form-section-travel #import-hotel-btn,
body:not(.light) #trip-form .trip-form-section-travel #import-parking-btn{
  background:linear-gradient(135deg,rgba(14,165,233,.09),rgba(99,102,241,.055)) !important;
  border-color:rgba(56,189,248,.25) !important;
}

@media(max-width:700px){
  #trip-form .trip-form-section-travel #import-flight-btn,
  #trip-form .trip-form-section-travel #import-transport-btn{
    min-height:52px !important;
    grid-template-columns:34px minmax(0,1fr) 16px !important;
    gap:9px !important;
    padding:8px 10px !important;
  }
  #trip-form .trip-form-section-travel .mvb-travel-import-icon{
    width:34px !important;
    height:34px !important;
  }
  #trip-form .trip-form-section-travel .mvb-travel-import-label{
    font-size:.85rem !important;
  }
}


/* v146 — unified Travel import controls + mobile polish */
#trip-form .trip-form-section-travel .mvb-travel-import-inline{
  margin:10px 0 12px !important;
}
#trip-form .trip-form-section-travel .mvb-travel-import-btn:disabled{
  opacity:.68 !important;
  cursor:wait !important;
}
#trip-form .trip-form-section-travel .mvb-travel-import-btn:disabled .mvb-travel-import-arrow{
  display:none !important;
}
@media (max-width:700px){
  #trip-form .trip-form-section-travel .mvb-travel-import-action{margin:0 !important;}
  #trip-form .trip-form-section-travel .mvb-travel-import-inline{margin:8px 0 10px !important;}
  #trip-form .trip-form-section-travel #import-flight-btn,
  #trip-form .trip-form-section-travel #import-transport-btn,
  #trip-form .trip-form-section-travel #import-hotel-btn,
  #trip-form .trip-form-section-travel #import-parking-btn{
    min-height:48px !important;
    padding:6px 9px !important;
    grid-template-columns:32px minmax(0,1fr) 14px !important;
    gap:8px !important;
    border-radius:13px !important;
  }
  #trip-form .trip-form-section-travel .mvb-travel-import-icon{
    width:32px !important;height:32px !important;border-radius:9px !important;font-size:.92rem !important;
  }
  #trip-form .trip-form-section-travel .mvb-travel-import-label{
    font-size:.82rem !important;line-height:1.15 !important;white-space:normal !important;
  }
  #trip-form .trip-form-section-travel .mvb-travel-import-arrow{font-size:1.15rem !important;}
  #trip-form .trip-form-section-travel .mvb-travel-import-note{
    margin:4px 3px 0 !important;font-size:.66rem !important;line-height:1.25 !important;
  }
}
@media (max-width:390px){
  #trip-form .trip-form-section-travel .mvb-travel-import-note{display:none !important;}
}


/* =========================================================
   v147 — Travel mobile layout correction
   Old mobile rules still forced Travel into two columns.
   On phones/tablets, every Travel group is now full-width.
   ========================================================= */
@media (max-width: 820px){
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-travel .travel-grid,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-travel .travel-grid-clean,
  #trip-form .trip-form-section-travel.mvb-mobile-travel-ready .travel-grid,
  #trip-form .trip-form-section-travel.mvb-mobile-travel-ready .travel-grid-clean{
    display:flex !important;
    flex-direction:column !important;
    grid-template-columns:none !important;
    gap:14px !important;
    width:100% !important;
    min-width:0 !important;
  }

  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-travel .mvb-travel-group,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-travel .mvb-travel-stay{
    display:grid !important;
    grid-template-columns:1fr !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    gap:12px !important;
    padding:14px !important;
    box-sizing:border-box !important;
  }

  #trip-form .trip-form-section-travel .mvb-travel-group > *,
  #trip-form .trip-form-section-travel .travel-field,
  #trip-form .trip-form-section-travel .travel-field-wide,
  #trip-form .trip-form-section-travel .flight-cost-card,
  #trip-form .trip-form-section-travel .transport-cost-card,
  #trip-form .trip-form-section-travel .travel-extra-cost-card,
  #trip-form .trip-form-section-travel .mvb-travel-import-action{
    grid-column:1 !important;
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  #trip-form .trip-form-section-travel .flight-cost-card,
  #trip-form .trip-form-section-travel .transport-cost-card,
  #trip-form .trip-form-section-travel .travel-extra-cost-card{
    padding:14px !important;
    border-radius:16px !important;
    overflow:hidden !important;
  }

  #trip-form .trip-form-section-travel .flight-cost-head,
  #trip-form .trip-form-section-travel .transport-cost-head{
    min-width:0 !important;
  }

  #trip-form .trip-form-section-travel .flight-cost-head > div:last-child,
  #trip-form .trip-form-section-travel .mvb-travel-group-head > div{
    min-width:0 !important;
  }

  #trip-form .trip-form-section-travel .flight-cost-title,
  #trip-form .trip-form-section-travel .transport-cost-head strong,
  #trip-form .trip-form-section-travel .mvb-travel-group-head strong{
    overflow-wrap:anywhere !important;
  }

  #trip-form .trip-form-section-travel .flight-cost-subtitle{
    font-size:.76rem !important;
    line-height:1.38 !important;
  }

  #trip-form .trip-form-section-travel input,
  #trip-form .trip-form-section-travel select,
  #trip-form .trip-form-section-travel textarea{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    box-sizing:border-box !important;
  }

  #trip-form .trip-form-section-travel .transport-cost-choice,
  #trip-form .trip-form-section-travel .flight-cost-choice{
    width:100% !important;
    min-width:0 !important;
  }

  #trip-form .trip-form-section-travel #import-flight-btn,
  #trip-form .trip-form-section-travel #import-transport-btn,
  #trip-form .trip-form-section-travel #import-hotel-btn,
  #trip-form .trip-form-section-travel #import-parking-btn{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    min-height:50px !important;
    grid-template-columns:30px minmax(0,1fr) 12px !important;
    gap:8px !important;
    padding:7px 9px !important;
    border-radius:14px !important;
    box-sizing:border-box !important;
  }

  #trip-form .trip-form-section-travel .mvb-travel-import-icon{
    width:30px !important;
    height:30px !important;
    border-radius:9px !important;
    font-size:.88rem !important;
  }

  #trip-form .trip-form-section-travel .mvb-travel-import-label{
    display:block !important;
    min-width:0 !important;
    overflow:visible !important;
    text-overflow:clip !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    font-size:.82rem !important;
    line-height:1.16 !important;
  }

  #trip-form .trip-form-section-travel .mvb-travel-import-note{
    margin:5px 2px 0 !important;
    font-size:.68rem !important;
    line-height:1.3 !important;
  }
}

@media (max-width: 430px){
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-travel .mvb-travel-group,
  #trip-modal-backdrop:is(.mvb-add-voyage-mode,.mvb-edit-voyage-mode) #trip-form .trip-form-section-travel .mvb-travel-stay{
    padding:12px !important;
    gap:11px !important;
    border-radius:17px !important;
  }

  #trip-form .trip-form-section-travel .flight-cost-card,
  #trip-form .trip-form-section-travel .transport-cost-card,
  #trip-form .trip-form-section-travel .travel-extra-cost-card{
    padding:12px !important;
  }

  #trip-form .trip-form-section-travel .mvb-travel-import-note{
    display:none !important;
  }
}


/* MyVoyageBoard v181 — Ship Info button lives in the hero's top-right corner. */
.mvb-renderer-hero,
.mvb-voyage-hero-wrap,
.trip-hero{
  position:relative;
}

.mvb-renderer-hero > .mvb-ship-info-btn,
.mvb-voyage-hero-wrap > .mvb-ship-info-btn,
.trip-hero > .mvb-ship-info-btn{
  position:absolute !important;
  top:16px !important;
  right:16px !important;
  left:auto !important;
  bottom:auto !important;
  width:auto !important;
  min-width:0 !important;
  margin:0 !important;
  padding:8px 12px !important;
  z-index:8 !important;
  border-radius:999px !important;
  white-space:nowrap !important;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(148,163,184,.28) !important;
  box-shadow:0 8px 22px rgba(15,23,42,.14) !important;
}

html.dark .mvb-renderer-hero > .mvb-ship-info-btn,
html.dark .mvb-voyage-hero-wrap > .mvb-ship-info-btn,
html.dark .trip-hero > .mvb-ship-info-btn,
body[data-theme="dark"] .mvb-renderer-hero > .mvb-ship-info-btn,
body[data-theme="dark"] .mvb-voyage-hero-wrap > .mvb-ship-info-btn,
body[data-theme="dark"] .trip-hero > .mvb-ship-info-btn{
  background:rgba(8,26,47,.84) !important;
  color:#f8fafc !important;
  border-color:rgba(148,163,184,.22) !important;
}

@media(max-width:760px){
  .mvb-renderer-hero > .mvb-ship-info-btn,
  .mvb-voyage-hero-wrap > .mvb-ship-info-btn,
  .trip-hero > .mvb-ship-info-btn{
    top:10px !important;
    right:10px !important;
    padding:7px 10px !important;
    font-size:.78rem !important;
  }
}


/* =========================================================
   v370 — STANDALONE VOYAGE EDIT PAYMENT TRACKER RESTORE
   The legacy financial-collapse rule hides direct-child financial controls.
   voyage-edit.html intentionally keeps Payment Tracker as a direct child.
   Restore it on the standalone editor while preserving Paid in Full hiding.
========================================================= */
body.mvb-voyage-edit-page #trip-form .trip-form-section-financial > .payment-tracker:not([hidden]){
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
}